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

/* ============================================
   REPS COMUNITY — DARK BLUE THEME (FULL CSS)
   Compatible with your existing class names
   ============================================ */

/* ---------- RESET ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* Performance optimizations */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  max-width: 100%;
  height: auto;
}

/* Lazy loading images */
img[loading="lazy"] {
  content-visibility: auto;
  contain-intrinsic-size: 300px 300px;
}

/* Optimizaciones de renderizado */
.product-card,
.carousel-item,
.product-grid {
  contain: layout style paint;
  will-change: transform;
  transform: translateZ(0); /* Force GPU acceleration */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.product-card img,
.carousel-item img {
  content-visibility: auto;
  contain-intrinsic-size: 300px 300px;
  loading: lazy;
  decoding: async;
  fetchpriority: low;
}

/* Optimizar animaciones */
@media (prefers-reduced-motion: no-preference) {
  .product-card,
  .carousel-track {
    will-change: transform;
  }
}

/* Optimizar ruleta */
.wheel-main,
.wheel-segment-floating {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* SEO Content Styles (removed inline styles) */
.seo-content-wrapper {
  max-width: 900px;
  margin: 0 auto;
}

.seo-content-text {
  color: var(--muted);
  line-height: 1.8;
  font-size: 1.1rem;
}

.seo-content-h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  margin-top: 0;
  color: var(--text);
}

.seo-content-h3-spaced {
  margin-top: 1.5rem;
}

.seo-content-p {
  margin-bottom: 1.5rem;
}

.seo-content-p-last {
  margin-bottom: 0;
}

.seo-content-link {
  color: var(--primary-color);
  text-decoration: underline;
  font-weight: 600;
}

.seo-content-link:hover {
  color: var(--primary-light);
}

.carousel-loading {
  color: #fff;
  text-align: center;
  padding: 2rem;
}

/* Footer Styles */
.site-footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  padding: 3rem 0 1.5rem;
  margin-top: 4rem;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-section {
  display: flex;
  flex-direction: column;
}

.footer-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1rem;
}

.footer-description {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
  font-size: 0.9rem;
}

.footer-links a:hover {
  color: var(--primary-color);
}

.social-links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-card-2);
  color: var(--muted);
  transition: all 0.2s ease;
  border: 1px solid var(--border);
}

.social-links a:hover {
  background: var(--primary-color);
  color: #fff;
  transform: translateY(-2px);
  border-color: var(--primary-color);
}

.footer-contact {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.875rem;
}

@media (max-width: 767px) {
  .footer-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .social-links {
    justify-content: flex-start;
  }
}

/* Optimizar header */
.header {
  transform: translateZ(0);
  will-change: transform, opacity;
}

/* Optimizar scroll performance */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* No usar contain en header sticky: rompe el menú móvil al hacer scroll */
.header.scrolled {
 contain: none;
}

/* ---------- THEME TOKENS ---------- */
:root {
  /* Brand - Red Theme */
  --primary-color: #dc2626;      /* rojo principal */
  --primary-dark:  #991b1b;      /* rojo oscuro */
  --primary-light: #ef4444;      /* rojo claro */
  --primary-accent: #f87171;      /* rojo brillante */

  /* Base - Dark Theme (Default) */
  --bg: #000000;                /* fondo oscuro */
  --bg-card: #0b0f1a;            /* cards oscuras */
  --bg-card-2: #0f172a;          /* hover oscuro */
  --bg-dark: #1a1a1a;           
  --text: #ffffff;               /* texto principal claro */
  --text-light: #ffffff;         
  --muted: #b8c1ff;              /* texto secundario */
  --muted-2: rgba(255,255,255,.72);

  --border: rgba(255,255,255,.10);
  --border-2: rgba(255,255,255,.08);
  --border-light: rgba(255,255,255,.08);

  --shadow-sm: 0 6px 18px rgba(0,0,0,.45);
  --shadow-md: 0 16px 40px rgba(0,0,0,.60);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.16);
  --glow: 0 0 0 6px rgba(220,38,38,.12);
  --glow-strong: 0 0 0 7px rgba(220,38,38,.16), 0 18px 60px rgba(0,0,0,.65);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;

  --transition-fast: 150ms ease;
  --transition-base: 280ms ease;
  --transition-slow: 500ms ease;

  /* Typography */
  --font-primary: "Manrope", "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;
}

/* Light Theme (Optional) */
:root[data-theme="light"] {
  /* Base - Minimalista Windows */
  --bg: #f5f5f5;                /* fondo claro */
  --bg-card: #ffffff;            /* cards blancas */
  --bg-card-2: #f0f0f0;         /* hover sutil */
  --bg-dark: #1a1a1a;           /* fondo oscuro para contraste */
  --text: #1a1a1a;               /* texto principal oscuro */
  --text-light: #ffffff;         /* texto claro para fondos oscuros */
  --muted: #4a5568;              /* texto secundario - más oscuro para mejor contraste */
  --muted-2: rgba(26,26,26,.85); /* más oscuro para mejor legibilidad */

  --border: rgba(220,38,38,.2);
  --border-2: rgba(220,38,38,.15);
  --border-light: rgba(0,0,0,.12); /* más visible */

  --shadow-sm: 0 2px 8px rgba(0,0,0,.1);
  --shadow-md: 0 4px 16px rgba(0,0,0,.15);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.2);
  --glow: 0 0 0 4px rgba(220,38,38,.12);
  --glow-strong: 0 0 0 6px rgba(220,38,38,.15), 0 8px 24px rgba(0,0,0,.15);
}

/* ---------- BASE ---------- */
body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--text);
  background: #080b13;
  overflow-x: hidden;
  min-height: 100vh;
  transition: background-color 0.3s ease, color 0.3s ease;
  padding-top: 80px; /* Compensar header fijo */
}

/* Variables para grid y glow */
:root {
  --grid-color: rgba(255, 255, 255, 0.06);
  --grid-glow: rgba(220, 38, 38, 0.15);
}

:root[data-theme="light"] {
  --bg: #ffffff;
  --grid-color: rgba(0, 0, 0, 0.03);
  --grid-glow: rgba(220, 38, 38, 0.05);
}

:root[data-theme="light"] body {
  background: #ffffff;
}

/* Light theme background gradient */
:root[data-theme="light"] body {
  background: #f5f5f5;
}

:root[data-theme="light"] body::before {
  background: 
    radial-gradient(1000px 600px at 50% 0%, rgba(220,38,38,.04), rgba(0,0,0,0) 70%),
    radial-gradient(800px 500px at 20% 20%, rgba(220,38,38,.02), rgba(0,0,0,0) 60%),
    #f5f5f5;
}

:root[data-theme="light"] .hero-modern,
:root[data-theme="light"] .featured-products-modern,
:root[data-theme="light"] .seo-content-modern,
:root[data-theme="light"] .community-modern {
  background: #f5f5f5;
  border-top-color: rgba(0,0,0,.05);
}

:root[data-theme="light"] .hero-title-modern,
:root[data-theme="light"] .section-title-modern {
  color: #0a0a0a;
}

:root[data-theme="light"] .hero-subtitle-modern,
:root[data-theme="light"] .section-subtitle-modern {
  color: rgba(0,0,0,.7);
}

:root[data-theme="light"] .hero-badge,
:root[data-theme="light"] .section-badge {
  border-color: rgba(0,0,0,.1);
  background: rgba(0,0,0,.02);
}

:root[data-theme="light"] .hero-badge-text,
:root[data-theme="light"] .section-badge-text {
  color: rgba(0,0,0,.6);
}

:root[data-theme="light"] .btn-hero-secondary {
  border-color: rgba(0,0,0,.2);
  color: #0a0a0a;
}

:root[data-theme="light"] .btn-hero-secondary:hover {
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.3);
}

/* ---------- CONTAINER ---------- */
.container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}
@media (min-width: 768px) {
  .container { padding: 0 var(--spacing-lg); }
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
.header {
  background: rgba(8,11,19,.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
  will-change: transform, opacity;
  animation: navbar-drop 0.8s ease-out forwards;
}

:root[data-theme="light"] .header {
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-bottom-color: rgba(0,0,0,.05);
}

.header.scrolled {
  box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(220,38,38,.10);
  border-bottom-color: var(--border-2);
}

:root[data-theme="light"] .header.scrolled {
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  border-bottom-color: rgba(220,38,38,.15);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.62rem 0;
  gap: 1rem;
}

.logo a {
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: .4px;
  color: var(--text);
  transition: color var(--transition-fast);
}
.logo a:hover { color: var(--primary-light); }

.nav {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-left: auto;
  min-width: 0;
}

.nav-list {
  display: flex;
  list-style: none;
  gap: 0.3rem;
  align-items: center;
  flex-wrap: nowrap;
}

.nav-list > li {
  display: flex;
  align-items: center;
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  white-space: nowrap;
}

.nav-dropdown-caret {
  width: 14px;
  height: 14px;
  opacity: 0.72;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-dropdown:hover .nav-dropdown-caret,
.nav-dropdown.open .nav-dropdown-caret,
.nav-dropdown.active .nav-dropdown-caret {
  transform: rotate(180deg);
  opacity: 1;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  min-width: 230px;
  padding: 0.45rem;
  display: grid;
  gap: 0.12rem;
  border-radius: 1.1rem;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(8,11,19,.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 40px rgba(0,0,0,.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
  z-index: 1005;
}

/* Invisible bridge to prevent dropdown closing when moving mouse from toggle to menu */
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 20px;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-dropdown-link {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.72rem 0.82rem;
  border-radius: 0.85rem;
  color: rgba(255,255,255,.86);
  font-size: 0.9rem;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-dropdown-link:hover {
  background: rgba(255,255,255,.05);
  color: #fff;
}

.nav-link {
  color: rgba(255,255,255,.90);
  font-weight: 500;
  position: relative;
  min-height: 40px;
  padding: 0.55rem 0.88rem;
  font-size: 0.93rem;
  border-radius: 0.85rem;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-link:hover {
  background: rgba(255,255,255,.04);
  color: var(--primary-light);
}
.nav-link.active {
  color: var(--primary-light);
  background: rgba(220,38,38,.12);
  font-weight: 600;
}

:root[data-theme="light"] .nav-link {
  color: var(--text);
}
:root[data-theme="light"] .nav-link:hover {
  background: var(--bg-card-2);
  color: var(--primary-color);
}
:root[data-theme="light"] .nav-link.active {
  color: var(--primary-color);
  background: rgba(220,38,38,.1);
}
.nav-dropdown.active > .nav-dropdown-toggle,
.nav-dropdown-toggle.active {
  color: var(--primary-light);
  background: rgba(220,38,38,.12);
  font-weight: 600;
}

:root[data-theme="light"] .nav-dropdown-menu {
  background: #ffffff;
  border-color: rgba(15,23,42,.08);
  box-shadow: 0 18px 36px rgba(15,23,42,.12);
}

:root[data-theme="light"] .nav-dropdown-link {
  color: rgba(16,24,40,.86);
}

:root[data-theme="light"] .nav-dropdown-link:hover {
  background: rgba(15,23,42,.05);
  color: #101828;
}

:root[data-theme="light"] .nav-dropdown.active > .nav-dropdown-toggle,
:root[data-theme="light"] .nav-dropdown-toggle.active {
  color: var(--primary-color);
  background: rgba(220,38,38,.1);
}
.nav-link::after { display:none; } /* apagamos underline viejo (más limpio) */

/* Header right actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

/* Registrarse button */
.btn-register {
  padding: 0.55rem 1.1rem;
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  color: var(--text-light);
  font-weight: 600;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
  transition: transform var(--transition-fast), background var(--transition-fast),
              box-shadow var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.btn-register:hover {
  transform: translateY(-1px);
  background: var(--primary-light);
  border-color: var(--primary-light);
  box-shadow: var(--shadow-md);
}

/* Theme toggle button */
.theme-toggle {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  width: 40px;
  height: 40px;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.theme-toggle:hover {
  border-color: rgba(220,38,38,.70);
  box-shadow: var(--glow);
  transform: translateY(-1px);
}

:root[data-theme="light"] .theme-toggle {
  background: var(--bg-card-2);
  border-color: var(--border-light);
  color: var(--text);
}

:root[data-theme="light"] .theme-toggle:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-md);
  background: var(--bg-card);
}

.theme-icon {
  position: absolute;
  width: 18px;
  height: 18px;
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.theme-icon-sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

.theme-icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

:root[data-theme="light"] .theme-icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

:root[data-theme="light"] .theme-icon-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

/* Config gear button */
.config-toggle {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  width: 40px;
  height: 40px;
  cursor: pointer;
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
  box-shadow: var(--shadow-sm);
}
.config-toggle:hover {
  border-color: rgba(220,38,38,.70);
  box-shadow: var(--glow);
  transform: translateY(-1px);
}

:root[data-theme="light"] .config-toggle {
  background: var(--bg-card-2);
  border-color: var(--border-light);
  color: var(--text);
}
:root[data-theme="light"] .config-toggle:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-md);
  background: var(--bg-card);
}

/* Mobile menu toggle */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-xs);
}
.mobile-menu-toggle span {
  width: 24px;
  height: 2px;
  background-color: #ffffff;
  transition: all var(--transition-base);
}

:root[data-theme="light"] .mobile-menu-toggle span {
  background-color: var(--text);
}

@media (max-width: 767px) {
 .header {
 padding: var(--spacing-xs) 0;
 }
 
 .header-content {
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 padding: 0 var(--spacing-sm);
 gap: var(--spacing-xs);
 }
 
 .logo { 
 display: flex; 
 align-items: center; 
 } 
 
 .logo a { 
 font-size: var(--font-size-lg); 
 } 
 
 .nav {
 display: flex;
 flex-direction: row;
 align-items: center;
 gap: var(--spacing-xs);
 }
 
 .header-actions {
 display: flex;
 align-items: center;
 gap: var(--spacing-xs);
 justify-content: flex-end;
 flex-wrap: nowrap;
 }
 
 .btn-register { 
 padding: 0.35rem .6rem; 
 font-size: 12px;
 white-space: nowrap;
 }
 
 .config-toggle { 
 width: 32px; 
 height: 32px; 
 border-radius: 10px; 
 } 
 
 .theme-toggle { 
 width: 32px; 
 height: 32px; 
 } 
 
 .mobile-menu-toggle { 
 display: flex;
 align-self: center;
 margin-top: 0;
 margin-left: 2px;
 }

  .nav-list {
    position: fixed;
    top: var(--header-height, 70px);
    right: 0;
    width: 280px;
    max-width: 85vw;
    height: calc(100vh - var(--header-height, 70px));
    background: rgba(0,0,0,.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-left: 1px solid var(--border-2);
    flex-direction: column;
    padding: var(--spacing-lg);
    box-shadow: -4px 0 20px rgba(0,0,0,.5);
    transform: translateX(100%);
    transition: transform var(--transition-base), top 0.1s ease-out;
    gap: var(--spacing-md);
    z-index: 1001;
    overflow-y: auto;
    /* Permitir que JavaScript actualice la posición dinámicamente */
    will-change: top, transform;
  }

  .nav-dropdown {
    width: 100%;
  }

  .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
  }

  .nav-dropdown-menu {
    position: static;
    min-width: 0;
    margin-top: 0.35rem;
    padding: 0.35rem;
    border-radius: 0.95rem;
    background: rgba(255,255,255,.03);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    display: none;
  }

  .nav-dropdown.open .nav-dropdown-menu {
    display: grid;
  }
  
  .nav-link {
    font-size: var(--font-size-sm);
    padding: var(--spacing-md);
    width: 100%;
    text-align: left;
  }

  .nav-dropdown-link {
    padding: 0.72rem 0.82rem;
    font-size: 0.9rem;
  }
  
  :root[data-theme="light"] .nav-list {
    background: var(--bg-card);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-left-color: var(--border-light);
    box-shadow: -4px 0 20px rgba(0,0,0,.2);
  }

  :root[data-theme="light"] .nav-dropdown-menu {
    background: rgba(15,23,42,.04);
    box-shadow: none;
  }
  
  .nav-list.active { 
    transform: translateX(0); 
  }
}

@media (max-width: 420px) {
 .header-content {
 padding: 0 var(--spacing-xs);
 }

 .logo a {
 font-size: 1.4rem;
 }

 .nav {
 gap: 4px;
 flex: 1;
 justify-content: flex-end;
 min-width: 0;
 }

 .header-actions {
 gap: 4px;
 min-width: 0;
 }

 .btn-register {
 padding: 0.3rem 0.5rem;
 font-size: 11px;
 max-width: 86px;
 overflow: hidden;
 text-overflow: ellipsis;
 }

 .config-toggle,
 .theme-toggle {
 width: 30px;
 height: 30px;
 }

 .mobile-menu-toggle {
 padding: 4px;
 }

 .mobile-menu-toggle span {
 width: 20px;
 }
}

@media (max-width: 350px) {
 .btn-register {
 display: none;
 }
}

/* ============================================
   HERO SECTION (Legacy - mantener para compatibilidad)
   ============================================ */
.hero:not(.hero-modern) {
  /* menos degradado “template”, más pro */
  background:
    radial-gradient(1000px 520px at 50% 0%, rgba(220,38,38,.22), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(10,27,85,.18), rgba(0,0,0,0) 60%),
    #000;
  color: #fff;
  padding: var(--spacing-xl) 0;
  text-align: center;
  min-height: 30vh;
  display:flex;
  align-items:center;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

:root[data-theme="light"] .hero {
  background:
    radial-gradient(1000px 520px at 50% 0%, rgba(220,38,38,.08), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(220,38,38,.05), rgba(0,0,0,0) 60%),
    var(--bg-card);
  color: var(--text);
  border-bottom-color: var(--border-light);
}

.hero-content { max-width: 900px; margin: 0 auto; }

.hero-title {
  font-size: var(--font-size-3xl);
  font-weight: 900;
  margin-bottom: 0;
  line-height: 1.15;
  letter-spacing: .2px;
}
.hero-subtitle {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-xl);
  color: var(--muted-2);
  font-weight: 500;
  line-height: 1.65;
}

@media (min-width: 768px) {
  .hero { min-height: 35vh; }
  .hero-title { font-size: 2.6rem; }
}

/* Mejoras móviles para Hero */
@media (max-width: 767px) {
  .hero {
    padding: var(--spacing-lg) 0;
    min-height: auto;
  }
  
  .hero-title {
    font-size: 1.75rem;
    line-height: 1.2;
    padding: 0 var(--spacing-sm);
  }
  
  .hero-subtitle {
    font-size: 1rem;
    padding: 0 var(--spacing-sm);
    line-height: 1.5;
  }
  
  .hero-content {
    padding: var(--spacing-md) 0;
  }
}

/* ============================================
   HERO INFINER (Nuevo diseño inspirado en template Infiner)
   ============================================ */
.hero-infiner {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #080b13;
  margin-top: -80px; /* Compensar padding del body */
}

:root[data-theme="light"] .hero-infiner {
  background: #ffffff;
}

/* Grid Background */
.grid-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0.4;
}

.grid-background::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(var(--grid-color, rgba(255,255,255,0.06)) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color, rgba(255,255,255,0.06)) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 50% at 50% 100%, black 0%, black 40%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 100%, black 0%, black 40%, transparent 70%);
}

.grid-background::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 60% at 50% 100%, var(--grid-glow, rgba(34,94,223,0.15)), transparent 60%);
}

:root[data-theme="light"] .grid-background::before {
  background-image: 
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
}

:root[data-theme="light"] .grid-background::after {
  background: radial-gradient(ellipse 100% 60% at 50% 100%, rgba(34,94,223,0.05), transparent 60%);
}

/* Meteors Container */
.meteors-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.meteor {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 3px 1px rgba(255,255,255,0.2);
  animation: meteor-effect linear infinite;
}

.meteor::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 120px;
  background: linear-gradient(to top, rgba(255,255,255,0.8), rgba(220,38,38,0.3), transparent);
}

@keyframes meteor-effect {
  0% {
    transform: rotate(-35deg) translateY(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: rotate(-35deg) translateY(800px);
    opacity: 0;
  }
}

.hero-content-infiner {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  text-align: center;
}

.hero-title-infiner {
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 1.5rem;
  max-width: 1000px;
}

.hero-line-1 {
  display: block;
  color: #fff;
}

.hero-line-2 {
  display: block;
  color: rgba(255,255,255,0.6);
}

:root[data-theme="light"] .hero-title-infiner,
:root[data-theme="light"] .hero-line-1 {
  color: #0f172a;
}

:root[data-theme="light"] .hero-line-2 {
  color: #64748b;
}

.hero-subtitle-infiner {
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.7);
  max-width: 700px;
  margin: 0 auto 2.5rem;
  font-weight: 400;
}

:root[data-theme="light"] .hero-subtitle-infiner {
  color: #64748b;
}

.hero-cta-infiner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

@media (min-width: 640px) {
  .hero-cta-infiner {
    flex-direction: row;
    justify-content: center;
  }
}

.btn-hero-infiner-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  background: var(--primary-color, #dc2626);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  text-decoration: none;
  min-height: 48px;
  border: none;
}

.btn-hero-infiner-primary:hover {
  background: var(--primary-light, #ef4444);
  transform: translateY(-1px);
}

.btn-hero-infiner-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  background: transparent;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  text-decoration: none;
  min-height: 48px;
}

.btn-hero-infiner-secondary:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(34,94,223,0.5);
}

:root[data-theme="light"] .btn-hero-infiner-secondary {
  color: #0f172a;
  border-color: rgba(0,0,0,0.2);
}

:root[data-theme="light"] .btn-hero-infiner-secondary:hover {
  background: rgba(0,0,0,0.05);
  border-color: rgba(34,94,223,0.5);
}

@media (max-width: 767px) {
  .hero-infiner {
    min-height: 90vh;
    padding-top: 70px;
  }
  
  .hero-title-infiner {
    font-size: clamp(2rem, 10vw, 3rem);
    margin-bottom: 1rem;
  }
  
  .hero-subtitle-infiner {
    font-size: 0.95rem;
    margin-bottom: 2rem;
  }
  
  .btn-hero-infiner-primary,
  .btn-hero-infiner-secondary {
    width: 100%;
    max-width: 300px;
    padding: 0.875rem 1.5rem;
    font-size: 0.95rem;
  }
}

/* ============================================
   HERO MODERNO (Legacy - mantener para compatibilidad)
   ============================================ */
.hero-modern {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0a0a0a;
}

.hero-background {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(1000px 600px at 50% 0%, rgba(220,38,38,.15), rgba(0,0,0,0) 70%),
    radial-gradient(800px 500px at 20% 20%, rgba(220,38,38,.1), rgba(0,0,0,0) 60%),
    #0a0a0a;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.3);
  backdrop-filter: blur(1px);
}

.hero-container {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.hero-content-modern {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: var(--spacing-xl) 0;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.02);
  margin-bottom: 2rem;
  border-radius: 4px;
}

.hero-badge-dot {
  width: 10px;
  height: 10px;
  background: #f59e0b;
  border-radius: 50%;
  flex-shrink: 0;
}

.hero-badge-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,.6);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hero-title-modern {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 1.5rem;
  max-width: 100%;
}

.hero-word {
  display: inline-block;
  margin-right: 0.25em;
  opacity: 0;
  filter: blur(10px);
  animation: fadeInWord 0.6s ease-out forwards;
}

.hero-word:nth-child(1) { animation-delay: 0.1s; }
.hero-word:nth-child(2) { animation-delay: 0.15s; }
.hero-word:nth-child(3) { animation-delay: 0.2s; }
.hero-word:nth-child(4) { animation-delay: 0.25s; }
.hero-word:nth-child(5) { animation-delay: 0.3s; }
.hero-word:nth-child(6) { animation-delay: 0.35s; }
.hero-word:nth-child(7) { animation-delay: 0.4s; }
.hero-word:nth-child(8) { animation-delay: 0.45s; }
.hero-word:nth-child(9) { animation-delay: 0.5s; }

@keyframes fadeInWord {
  to {
    opacity: 1;
    filter: blur(0);
  }
}

/* Animaciones para Hero Infiner */
@keyframes navbar-drop {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-in-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-slide-in-right {
  opacity: 0;
  animation: slide-in-right 0.8s ease-out forwards;
}

@keyframes slide-up {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-up-delayed {
  opacity: 0;
  animation: slide-up 0.8s ease-out 0.3s forwards;
}

.animate-slide-up-delayed-2 {
  opacity: 0;
  animation: slide-up 0.8s ease-out 0.5s forwards;
}

.animate-slide-up-delayed-3 {
  opacity: 0;
  animation: slide-up 0.8s ease-out 0.7s forwards;
}

.hero-subtitle-modern {
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.6;
  color: rgba(255,255,255,.7);
  max-width: 700px;
  margin: 0 auto 2.5rem;
  font-weight: 400;
}

.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .hero-cta {
    flex-direction: row;
    justify-content: center;
  }
}

.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  background: #fff;
  color: #0a0a0a;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 4px;
  transition: all 0.2s ease;
  text-decoration: none;
  min-height: 48px;
}

.btn-hero-primary:hover {
  background: rgba(255,255,255,.9);
  transform: translateY(-1px);
}

.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  background: transparent;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 4px;
  transition: all 0.2s ease;
  text-decoration: none;
  min-height: 48px;
}

.btn-hero-secondary:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.5);
}

@media (max-width: 767px) {
  .hero-modern {
    min-height: 70vh;
  }
  
  .hero-title-modern {
    font-size: clamp(2rem, 10vw, 3rem);
    margin-bottom: 1rem;
  }
  
  .hero-subtitle-modern {
    font-size: 0.95rem;
    margin-bottom: 2rem;
  }
  
  .hero-badge {
    margin-bottom: 1.5rem;
    padding: 0.4rem 0.8rem;
  }
  
  .btn-hero-primary,
  .btn-hero-secondary {
    width: 100%;
    max-width: 300px;
    padding: 0.875rem 1.5rem;
    font-size: 0.95rem;
  }
}

/* ============================================
   SECCIONES MODERNAS (Nuevo diseño)
   ============================================ */
.featured-products-modern {
  padding: 0.5rem 0 !important;
  background: transparent !important;
  border-top: none !important;
  margin: 0 !important;
}

.seo-content-modern,
.community-modern {
  padding: 5rem 0;
  background: var(--bg, #080b13);
  border-top: 1px solid rgba(255,255,255,.05);
}

:root[data-theme="light"] .featured-products-modern {
  background: transparent !important;
  border-top: none !important;
}

:root[data-theme="light"] .seo-content-modern,
:root[data-theme="light"] .community-modern {
  background: #ffffff;
  border-top-color: rgba(0,0,0,.05);
}

.community-cta {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.section-header-modern {
  text-align: center;
  margin-bottom: 3rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.02);
  margin-bottom: 1.5rem;
  border-radius: 4px;
}

.section-badge-dot {
  width: 10px;
  height: 10px;
  background: #f59e0b;
  border-radius: 50%;
  flex-shrink: 0;
}

.section-badge-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255,255,255,.6);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.section-title-modern {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 1rem;
  text-align: center;
}

.section-subtitle-modern {
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.6;
  color: rgba(255,255,255,.6);
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 767px) {
  .featured-products-modern {
    padding: 0.5rem 0 !important;
  }
  
  .seo-content-modern,
  .community-modern {
    padding: 3rem 0;
  }
  
  .section-title-modern {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
  }
  
  .section-subtitle-modern {
    font-size: 0.95rem;
    padding: 0 var(--spacing-sm);
  }
  
  .section-badge {
    margin-bottom: 1rem;
    padding: 0.4rem 0.8rem;
  }
}

/* ============================================
   BUTTONS (global)
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 0.8rem 1.25rem;
  font-size: var(--font-size-base);
  font-weight: 800;
  border-radius: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--transition-fast),
              background var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  text-align: center;
  user-select: none;
  min-height: 44px; /* Tamaño mínimo táctil para móviles */
  touch-action: manipulation; /* Mejor respuesta táctil */
}

/* Mejoras móviles para botones */
@media (max-width: 767px) {
  .btn {
    padding: 0.75rem 1.1rem;
    font-size: 0.95rem;
    min-height: 44px; /* Asegurar tamaño táctil mínimo */
  }
  
  .btn-large {
    padding: 1rem 1.5rem;
    font-size: 1.05rem;
  }
}

.btn-primary {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-light);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: var(--primary-light);
  border-color: var(--primary-light);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  color: #fff;
}
.btn-secondary:hover {
  transform: translateY(-2px);
  background: rgba(220,38,38,.16);
  border-color: rgba(220,38,38,.70);
  box-shadow: var(--glow);
}

.btn-large { padding: 1rem 1.7rem; font-size: var(--font-size-lg); }

/* ============================================
   SECTIONS
   ============================================ */
section {
  padding: var(--spacing-2xl) 0;
  background: transparent;
}

.section-title {
  font-size: var(--font-size-3xl);
  font-weight: 900;
  text-align: center;
  margin-bottom: var(--spacing-md);
  color: #fff;
}

/* Mejoras móviles para títulos de sección */
@media (max-width: 767px) {
  .section-title {
    font-size: 1.75rem;
    line-height: 1.2;
    padding: 0 var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
  }
  
  .section-subtitle {
    font-size: 0.95rem;
    padding: 0 var(--spacing-sm);
    line-height: 1.5;
  }
  
  section {
    padding: var(--spacing-lg) 0;
  }
}

:root[data-theme="light"] .section-title {
  color: #1a1a1a;
}
.section-subtitle {
  text-align: center;
  color: var(--muted);
  margin-bottom: var(--spacing-xl);
  font-size: var(--font-size-lg);
}

/* ============================================
   FEATURES SECTION
   ============================================ */
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}
@media (min-width: 768px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .features-grid { grid-template-columns: repeat(4, 1fr); }
}

.feature-card {
  background: rgba(11,15,26,.75);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: var(--spacing-lg);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.feature-card:hover {
  transform: translateY(-8px);
  border-color: rgba(220,38,38,.55);
  box-shadow: var(--glow-strong);
}
.feature-icon {
  color: var(--primary-color);
  margin-bottom: var(--spacing-md);
  display: flex;
  justify-content: center;
}
.feature-card h3 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-sm);
  color: #fff;
  font-weight: 900;
}
.feature-card p {
  color: var(--muted-2);
  font-size: var(--font-size-sm);
}

/* ============================================
   PRODUCTS GRID (general cards)
   ============================================ */
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columnas en móvil */
  gap: var(--spacing-xs);
  margin-top: 0;
  padding: 0 var(--spacing-xs);
}

@media (min-width: 480px) {
  .products-grid {
    gap: var(--spacing-sm);
    padding: 0 var(--spacing-sm);
  }
}

@media (max-width: 640px) {
  /* Mejorar cards de productos en móvil */
  .product-card {
    border-radius: var(--radius);
  }
  
  .product-info {
    padding: var(--spacing-sm);
  }
  
  .product-name {
    font-size: 0.95rem;
    line-height: 1.3;
  }
  
  .product-price {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-xs);
  }
  
  .product-actions .btn {
    min-height: 40px;
    font-size: 0.875rem;
    padding: 0.6rem 1rem;
  }
}

@media (min-width: 640px) {
  .products-grid { 
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    padding: 0;
  }
}
@media (min-width: 1024px) {
  .products-grid { 
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
  }
}
@media (min-width: 1400px) {
  .products-grid { 
    grid-template-columns: repeat(4, 1fr);
  }
}

.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  will-change: transform;
}
.product-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary-color);
  box-shadow: var(--shadow-md);
}

.product-image {
  width: 100%;
  height: 250px;
  background: var(--bg-card-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-light);
  overflow: hidden;
  position: relative;
}

@media (max-width: 640px) {
  .product-image {
    height: 160px; /* Más compacto en móvil */
  }
}

.badge-quality {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #dc2626; /* Azul más brillante y visible */
  border: 2px solid #ffffff; /* Borde blanco para mejor contraste */
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 6px; /* Bordes más definidos */
  font-size: 11px;
  font-weight: 800; /* Más bold */
  letter-spacing: 0.5px; /* Mejor legibilidad */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1); /* Sombra más fuerte */
  z-index: 10;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

@media (max-width: 640px) {
  .badge-quality {
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    font-size: 10px;
    border-width: 1.5px;
  }
}

:root[data-theme="light"] .badge-quality {
  background: #dc2626; /* Azul brillante */
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-base);
  will-change: transform;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.image-placeholder {
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: var(--font-size-base);
  text-align: center;
}

.product-info {
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: .4rem;
  flex-grow: 1;
}
.product-name {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}
.product-description {
  color: var(--muted);
  font-size: var(--font-size-sm);
  flex-grow: 1;
}

.product-meta {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 6px 0 12px;
}

@media (max-width: 640px) {
  .product-meta {
    font-size: var(--font-size-xs);
    margin: 4px 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.product-weight,
.product-quality {
  color: var(--muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.product-price {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--text);
}

@media (max-width: 640px) {
  .product-price {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-xs);
  }
}

.product-actions {
  display: flex;
  margin-top: auto;
}

@media (max-width: 640px) {
  .product-actions {
    margin-top: var(--spacing-xs);
  }
  
  .product-actions .btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
  }
}

.product-actions {
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  margin-top: var(--spacing-sm);
}
.product-actions .btn { 
  flex: 1; 
  min-width: 130px;
  text-align: center;
  justify-content: center;
}

/* ============================================
   CALL TO ACTION SECTION
   ============================================ */
.cta-section {
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(220,38,38,.16), rgba(0,0,0,0) 60%),
    rgba(11,15,26,.35);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: #fff;
  text-align: center;
  padding: var(--spacing-2xl) 0;
}
.cta-title {
  font-size: var(--font-size-3xl);
  font-weight: 900;
  margin-bottom: var(--spacing-md);
}
.cta-text {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-xl);
  color: var(--muted-2);
}
@media (min-width: 768px) {
  .cta-title { font-size: var(--font-size-4xl); }
}

/* ============================================
   PRODUCTS PAGE
   ============================================ */
.page-header {
  background: transparent;
  padding: var(--spacing-md) 0 var(--spacing-sm);
  text-align: left;
}

.page-header .container {
  max-width: 1200px;
}

.page-title {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
  color: var(--text);
  letter-spacing: -0.02em;
}

.page-subtitle {
  font-size: var(--font-size-base);
  color: var(--muted);
  margin-bottom: 0;
  font-weight: 400;
}

/* CTA Banner Section */
.cta-banner-section {
  padding: var(--spacing-lg) 0;
  background: linear-gradient(
    180deg,
    rgba(0, 183, 195, 0.05) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  border-bottom: 1px solid var(--border-light);
  margin-bottom: var(--spacing-lg);
}

.cta-banner-content {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.cta-banner-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--spacing-lg);
  line-height: 1.2;
}

.cta-gradient-text {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
}

.cta-buttons-container {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 1rem 2rem;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition-base);
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}

.cta-btn svg {
  flex-shrink: 0;
}

.cta-btn-hubbuy {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-light);
  box-shadow: var(--shadow-sm);
}

.cta-btn-hubbuy:hover {
  background: var(--primary-light);
  border-color: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.cta-btn-discord {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.cta-btn-discord:hover {
  background: var(--bg-card-2);
  border-color: var(--primary-color);
  color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

@media (max-width: 768px) {
  .cta-banner-title {
    font-size: 1.75rem;
  }
  
  .cta-buttons-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .cta-btn {
    justify-content: center;
    width: 100%;
  }
}

/* Como Comprar Section */
.como-comprar-section {
  padding: var(--spacing-2xl) 0;
  background: transparent;
}

.como-comprar-content {
  max-width: 1400px;
  margin: 0 auto;
  color: var(--text);
  line-height: 1.7;
}

.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

@media (min-width: 1024px) {
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
  }
}

.steps-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Step Cards */
.step-card {
  background: rgba(11,15,26,.6);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
}

:root[data-theme="light"] .step-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: var(--shadow-sm);
}

.step-card:hover {
  border-color: rgba(220,38,38,.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

:root[data-theme="light"] .step-card:hover {
  border-color: rgba(220,38,38,.4);
  box-shadow: var(--shadow-md);
}

.step-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  cursor: pointer;
  transition: background var(--transition-fast);
  user-select: none;
}

.step-header:hover {
  background: rgba(220,38,38,.05);
}

:root[data-theme="light"] .step-header:hover {
  background: rgba(220,38,38,.08);
}

.step-header.active {
  background: rgba(220,38,38,.1);
}

:root[data-theme="light"] .step-header.active {
  background: rgba(220,38,38,.12);
}

.step-number {
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(220,38,38,.2), rgba(220,38,38,.1));
  border: 2px solid rgba(220,38,38,.4);
  border-radius: 12px;
  font-size: var(--font-size-xl);
  font-weight: 900;
  color: var(--primary-light);
}

:root[data-theme="light"] .step-number {
  background: linear-gradient(135deg, rgba(220,38,38,.15), rgba(220,38,38,.08));
  border-color: rgba(220,38,38,.5);
  color: var(--primary-color);
}

.step-title-content {
  flex: 1;
}

.step-title {
  font-size: var(--font-size-xl);
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}

:root[data-theme="light"] .step-title {
  color: #1a1a1a;
}

.step-arrow {
  color: rgba(255,255,255,.6);
  transition: transform var(--transition-base);
  flex-shrink: 0;
}

:root[data-theme="light"] .step-arrow {
  color: rgba(26,26,26,.6);
}

.step-header.active .step-arrow {
  transform: rotate(180deg);
  color: var(--primary-light);
}

:root[data-theme="light"] .step-header.active .step-arrow {
  color: var(--primary-color);
}

.step-content {
  max-height: 0;
  overflow: hidden;
  padding: 0 var(--spacing-lg);
  transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              padding 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.step-content.expanded {
  max-height: 3000px;
  padding: 0 var(--spacing-lg) var(--spacing-xl);
  transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              padding 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.step-content p {
  margin-bottom: var(--spacing-md);
  color: rgba(255,255,255,.85);
  line-height: 1.8;
}

:root[data-theme="light"] .step-content p {
  color: #2d3748;
  line-height: 1.8;
}

.step-subsection {
  margin-top: var(--spacing-lg);
  padding-left: var(--spacing-md);
  border-left: 2px solid rgba(220,38,38,.3);
}

.step-subtitle {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--spacing-sm);
}

.step-list {
  list-style: none;
  padding-left: 0;
  margin: var(--spacing-md) 0;
}

.step-list li {
  margin-bottom: var(--spacing-sm);
  padding-left: var(--spacing-md);
  position: relative;
  color: rgba(255,255,255,.8);
}

.step-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--primary-light);
  font-weight: bold;
}

.step-link {
  color: var(--primary-light);
  text-decoration: none;
  transition: color var(--transition-fast);
  border-bottom: 1px solid transparent;
}

.step-link:hover {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

.step-highlight {
  background: rgba(220,38,38,.1);
  border: 1px solid rgba(220,38,38,.3);
  border-radius: var(--radius);
  padding: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.step-highlight p {
  margin: 0;
  color: rgba(255,255,255,.9);
}

/* Order States Grid */
.order-states-section {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(255,255,255,.1);
}

.order-states-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

@media (min-width: 768px) {
  .order-states-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.order-state-item {
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all var(--transition-fast);
}

.order-state-item:hover {
  border-color: rgba(220,38,38,.3);
  background: rgba(220,38,38,.05);
}

.order-state-name {
  font-weight: 700;
  color: var(--primary-light);
  font-size: var(--font-size-sm);
}

.order-state-desc {
  font-size: var(--font-size-sm);
  color: rgba(255,255,255,.7);
  line-height: 1.5;
}

/* Step CTA Button */
.step-cta {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(255,255,255,.1);
}

.step-register-btn {
  display: inline-block;
  padding: var(--spacing-md) var(--spacing-xl);
  background: rgba(220,38,38,.2);
  border: 2px solid rgba(220,38,38,.5);
  border-radius: 50px;
  color: var(--primary-light);
  font-size: var(--font-size-base);
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition-base);
  box-shadow: 0 2px 10px rgba(220,38,38,.2);
}

.step-register-btn:hover {
  background: rgba(220,38,38,.3);
  border-color: rgba(220,38,38,.7);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(220,38,38,.3);
}

/* Category filter buttons row */
.product-filters {
  background: transparent;
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: var(--spacing-lg);
}

.product-filters-top {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  margin-top: var(--spacing-md);
}

@media (min-width: 769px) {
  .product-filters-top {
    justify-content: center;
  }
  
  .sort-container {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

.categories-container {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--spacing-md);
  padding: 0 var(--spacing-sm);
}

/* Nuevos estilos para filtros modernos - Diseño mejorado */
.categories-container-modern {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 1.5rem 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.categories-container-modern::-webkit-scrollbar {
  display: none;
}

@media (max-width: 768px) {
  .categories-container-modern {
    gap: 1rem;
    justify-content: flex-start;
  }
}

.category-btn-modern {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  transition: all 0.2s ease;
  position: relative;
}

.category-btn-modern:hover:not(.active) {
  color: rgba(255, 255, 255, 0.95);
}

.category-btn-modern.active {
  background: #dc2626 !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  padding: 0.5rem 1rem !important;
}

.category-btn-modern .category-badge {
  display: inline;
  background: transparent;
  padding: 0;
  margin-left: 0.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: inherit;
  opacity: 0.7;
}

.category-btn-modern.active .category-badge {
  color: rgba(255, 255, 255, 0.9) !important;
  opacity: 1;
}

.filters-btn-modern {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
}

.filters-btn-modern:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.filters-btn-modern svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.filters-btn-modern:hover svg {
  opacity: 1;
}

.search-input-modern {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 400;
}

.search-input-modern:focus {
  border-color: rgba(220, 38, 38, 0.6);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
  outline: none;
}

.search-input-modern::placeholder {
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s ease;
  font-weight: 400;
}

.search-input-modern:focus::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* Responsive para filtros modernos */
@media (max-width: 768px) {
  .categories-container-modern {
    gap: 1rem;
    margin: 1rem 0;
    justify-content: center;
    padding: 0 0.5rem;
  }
  
  .category-btn-modern {
    padding: 0.5rem 0.875rem;
    font-size: 0.85rem;
    white-space: nowrap;
  }
  
  .category-btn-modern.active {
    padding: 0.5rem 0.875rem !important;
  }
  
  .category-btn-modern .category-badge {
    font-size: 0.85rem;
  }
  
  .search-container-modern {
    max-width: 100% !important;
    margin: 0 auto 1.5rem auto !important;
    padding: 0 1rem;
  }
  
  .search-input-modern {
    padding: 0.875rem 1rem 0.875rem 3rem !important;
    font-size: 0.9rem !important;
  }
  
  .filters-btn-modern {
    padding: 0.625rem 1rem;
    font-size: 0.85rem;
  }
}

:root[data-theme="light"] .category-btn-modern {
  background: transparent;
  border: none;
  color: #000000;
}

:root[data-theme="light"] .category-btn-modern:hover {
  background: transparent;
  border: none;
  color: #000000;
}

:root[data-theme="light"] .category-btn-modern.active {
  background: #dc2626 !important;
  border: none !important;
  color: #ffffff !important;
}

:root[data-theme="light"] .category-btn-modern .category-badge {
  background: transparent;
  color: inherit;
  opacity: 0.7;
}

:root[data-theme="light"] .category-btn-modern.active .category-badge {
  color: rgba(255, 255, 255, 0.9) !important;
  opacity: 1;
}

:root[data-theme="light"] .filters-btn-modern {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.8);
}

:root[data-theme="light"] .filters-btn-modern:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.95);
  transform: translateY(-1px);
}

:root[data-theme="light"] .search-input-modern {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.9);
}

:root[data-theme="light"] .search-input-modern:focus {
  border-color: rgba(220, 38, 38, 0.5);
  background: rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

:root[data-theme="light"] .search-input-modern::placeholder {
  color: rgba(0, 0, 0, 0.5);
}

:root[data-theme="light"] .search-icon-modern {
  color: rgba(0, 0, 0, 0.5);
}

.category-btn {
  padding: 0.65rem 1.4rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.category-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(43, 91, 255, 0.1), rgba(43, 91, 255, 0.05));
  opacity: 0;
  transition: opacity 0.2s ease;
}

.category-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(43, 91, 255, 0.5);
  color: var(--text-light);
  transform: translateY(-1px);
}

.category-btn:hover::before {
  opacity: 1;
}

.category-btn.active {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: #ffffff;
  font-weight: 600;
  border-color: #dc2626;
  box-shadow: 0 4px 12px rgba(43, 91, 255, 0.3);
  transform: translateY(-1px);
}

.category-btn.active::before {
  opacity: 0;
}

[data-theme="light"] .category-btn {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  color: #1a1a1a;
}

[data-theme="light"] .category-btn:hover {
  background: #f8f9fa;
  border-color: var(--accent);
  color: var(--accent);
}

[data-theme="light"] .category-btn.active {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: #ffffff;
  border-color: #dc2626;
}

.sort-container {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
}

.sort-select {
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-light);
  font-size: var(--font-size-sm);
  font-family: var(--font-primary);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 220px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px;
}

.sort-select:hover {
  border-color: var(--accent);
  background-color: rgba(255, 255, 255, 0.08);
}

.sort-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(43, 91, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.08);
}

.sort-select option {
  background: #1a1a1a;
  color: var(--text-light);
  padding: 0.5rem;
}

[data-theme="light"] .sort-select {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.15);
  color: #1a1a1a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px;
}

[data-theme="light"] .sort-select:hover {
  border-color: var(--accent);
  background-color: #f8f9fa;
}

[data-theme="light"] .sort-select option {
  background: #ffffff;
  color: #1a1a1a;
}

@media (max-width: 768px) {
  .product-filters-top {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-container {
    width: 100%;
    max-width: 100%;
    margin-bottom: var(--spacing-sm);
  }
  
  .sort-container {
    position: static;
    transform: none;
    width: 100%;
    margin-top: var(--spacing-sm);
  }
  
  .sort-select {
    width: 100%;
    min-width: auto;
  }
}

.search-container {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
  padding: 0 var(--spacing-sm);
  flex: 0 0 auto;
}

.search-input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--font-size-base);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

:root[data-theme="light"] .search-input {
  background: #ffffff;
  border-color: rgba(0,0,0,.15);
  color: #1a1a1a;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(220,38,38,.1);
}

:root[data-theme="light"] .search-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(220,38,38,.15);
}

.search-input::placeholder {
  color: var(--muted);
}

:root[data-theme="light"] .search-input::placeholder {
  color: #6b7280;
  opacity: 0.7;
}

.search-icon {
  position: absolute;
  left: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

:root[data-theme="light"] .search-icon {
  color: #6b7280;
  opacity: 0.7;
}

.search-input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 48px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: #fff;
  font-size: var(--font-size-base);
  transition: all var(--transition-fast);
}

@media (max-width: 640px) {
  .search-input {
    padding: var(--spacing-xs) var(--spacing-sm) var(--spacing-xs) 40px;
    font-size: var(--font-size-sm);
  }
  
  .search-icon {
    left: var(--spacing-sm);
    width: 16px;
    height: 16px;
  }
}

.search-input::placeholder {
  color: rgba(255,255,255,.5);
}

.search-input:focus {
  outline: none;
  border-color: rgba(220,38,38,.5);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 3px rgba(220,38,38,.1);
}

.products-page {
  padding: var(--spacing-md) 0;
  background: transparent;
}

/* Sidebar de filtros - toggle desde botón moderno */
.filters-sidebar {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

@media (max-width: 1023px) {
  .filters-sidebar {
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    height: 100vh;
    background: var(--bg-card);
    z-index: 1000;
    overflow-y: auto;
    transition: right 0.3s ease;
    box-shadow: -2px 0 8px rgba(0,0,0,0.3);
  }
  
  .filters-sidebar.active {
    right: 0;
  }
}

.products-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--spacing-lg);
  align-items: start;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* Filters Sidebar */
.filters-sidebar {
  background: rgba(15,23,42,.92);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: var(--spacing-md);
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.filters-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.filters-icon {
  color: var(--primary-light);
  width: 20px;
  height: 20px;
}

.filters-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.filter-section {
  margin-bottom: var(--spacing-sm);
}

.filter-section-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) 0;
  background: transparent;
  border: none;
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.filter-section-header:hover {
  color: var(--primary-light);
}

.filter-arrow {
  transition: transform var(--transition-base);
  color: rgba(255,255,255,.6);
}

.filter-section-header[aria-expanded="true"] .filter-arrow {
  transform: rotate(180deg);
}

.filter-section-content {
  padding-top: var(--spacing-sm);
  display: none;
}

.filter-section-content.expanded {
  display: block;
}

/* Make brands section scrollable when expanded */
#marcasContent.expanded {
  max-height: 400px;
  overflow-y: auto;
  padding-right: var(--spacing-xs);
}

/* Custom scrollbar for brands section */
#marcasContent.expanded::-webkit-scrollbar {
  width: 6px;
}

#marcasContent.expanded::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

#marcasContent.expanded::-webkit-scrollbar-thumb {
  background: rgba(43, 91, 255, 0.5);
  border-radius: 3px;
}

#marcasContent.expanded::-webkit-scrollbar-thumb:hover {
  background: rgba(43, 91, 255, 0.7);
}

/* Quality Buttons */
.quality-btn {
  width: 100%;
  padding: 0.6rem 0.75rem;
  margin-bottom: var(--spacing-xs);
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
}

.quality-btn:hover {
  border-color: rgba(220,38,38,.5);
  background: rgba(220,38,38,.1);
}

.quality-btn.active {
  background: rgba(220,38,38,.2);
  border-color: rgba(220,38,38,.8);
  color: var(--primary-light);
}

/* Color Swatches */
.color-swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--spacing-xs);
}

.color-swatch {
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,.2);
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: 0;
  position: relative;
}

.color-swatch:hover {
  transform: scale(1.1);
  border-color: rgba(255,255,255,.5);
}

.color-swatch.active {
  border-color: #fff;
  border-width: 3px;
  box-shadow: 0 0 0 2px rgba(220,38,38,.5);
}

/* Brand Buttons */
.brand-btn {
  width: 100%;
  padding: 0.6rem 0.75rem;
  margin-bottom: var(--spacing-xs);
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: left;
}

.brand-btn:hover {
  border-color: rgba(220,38,38,.5);
  background: rgba(220,38,38,.1);
}

.brand-btn.active {
  background: rgba(220,38,38,.2);
  border-color: rgba(220,38,38,.8);
  color: var(--primary-light);
}

.products-grid-wrapper {
  flex: 1;
  min-width: 0;
}

/* Pagination Container */
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}

.pagination-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  color: var(--text);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base);
  min-width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-btn:hover:not(:disabled) {
  background: var(--bg-card-2);
  border-color: var(--primary-color);
  color: var(--primary-color);
  transform: translateY(-1px);
}

.pagination-btn.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-light);
  box-shadow: var(--shadow-sm);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-ellipsis {
  color: var(--muted);
  padding: 0 var(--spacing-sm);
  font-weight: 600;
}

:root[data-theme="light"] .pagination-btn {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  color: #1a1a1a;
}

:root[data-theme="light"] .pagination-btn:hover:not(:disabled) {
  background: #f5f5f5;
  border-color: var(--primary-color);
  color: var(--primary-color);
}

:root[data-theme="light"] .pagination-btn.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #ffffff;
}

@media (max-width: 640px) {
  .pagination-container {
    gap: var(--spacing-xs);
  }
  
  .pagination-btn {
    min-width: 36px;
    height: 36px;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 13px;
  }
}

.products-page .container {
  max-width: 100%;
  padding: 0 var(--spacing-md);
}

@media (max-width: 1023px) {
  .products-layout {
    grid-template-columns: 1fr;
  }
  
  .filters-sidebar {
    position: relative;
    top: 0;
    max-height: none;
    margin-bottom: var(--spacing-lg);
  }
}

@media (max-width: 640px) {
  .products-page .container {
    padding: 0 var(--spacing-xs);
  }
  
  .filters-sidebar {
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    border-radius: var(--radius);
  }
  
  .filter-section {
    margin-bottom: var(--spacing-xs);
  }
  
  .filter-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
  }
  
  .page-title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-xs);
  }
  
  .page-subtitle {
    font-size: var(--font-size-sm);
  }
  
  .section-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
  }
  
  .hero-title {
    font-size: var(--font-size-2xl);
  }
  
  .hero {
    min-height: 20vh;
    padding: var(--spacing-md) 0;
  }
  
  .featured-products-carousel {
    padding: var(--spacing-lg) 0;
  }
  
  .carousel-wrapper {
    margin-top: 0 !important;
  }
  
  .carousel-track {
    gap: var(--spacing-sm);
  }
  
  /* Mejorar espaciado general en móviles */
  .container {
    padding: 0 var(--spacing-sm);
  }
  
  /* Productos más compactos */
  .product-card {
    border-radius: var(--radius);
  }
  
  /* Botones más pequeños */
  .btn {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
  }
  
  /* Mejorar scroll en móviles */
  html {
    -webkit-text-size-adjust: 100%;
  }
  
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* Evitar zoom en inputs en iOS */
  input[type="text"],
  input[type="search"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
  }
  
  /* Mejorar touch targets */
  button,
  a.btn,
  .filter-btn,
  .pagination-btn {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--bg-card);
  color: var(--text);
  padding: var(--spacing-2xl) 0 var(--spacing-lg);
  border-top: 1px solid var(--border-light);
  box-shadow: 0 -2px 8px rgba(0,0,0,.3);
}

:root[data-theme="light"] .footer {
  box-shadow: 0 -2px 8px rgba(0,0,0,.05);
}
.footer-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}
@media (min-width: 768px) {
  .footer-content { grid-template-columns: repeat(3, 1fr); }
}
.footer-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
  color: var(--text);
}
.footer-heading {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
  color: var(--text);
}

.footer-section p {
  color: var(--muted);
  line-height: 1.6;
}

:root[data-theme="light"] .footer-section p {
  color: #4a5568;
  font-weight: 400;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: var(--spacing-xs); }
.footer-links a {
  color: var(--muted);
  transition: color var(--transition-fast);
}
.footer-links a:hover { color: var(--primary-color); }

:root[data-theme="light"] .footer-links a {
  color: #374151;
  font-weight: 500;
}

:root[data-theme="light"] .footer-links a:hover {
  color: var(--primary-color);
}

.social-links { display: flex; gap: var(--spacing-md); flex-wrap: wrap; }
.social-link {
  color: var(--muted);
  transition: color var(--transition-fast);
}
.social-link:hover { color: var(--primary-color); }

:root[data-theme="light"] .social-link {
  color: #374151;
  font-weight: 500;
}

:root[data-theme="light"] .social-link:hover {
  color: var(--primary-color);
}

.footer-bottom {
  text-align: center;
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-light);
  color: var(--muted);
}

:root[data-theme="light"] .footer-bottom {
  color: #6b7280;
}

:root[data-theme="light"] .footer p {
  color: #4a5568;
}

/* ============================================
   ANIMATIONS
   ============================================ */
.fade-in { opacity: 0; animation: fadeIn 1s ease-in-out forwards; }
@keyframes fadeIn { to { opacity: 1; } }

.slide-up {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.slide-up.visible { opacity: 1; transform: translateY(0); }

/* (si tu HTML usa nth-child para stagger, lo dejamos) */
.slide-up:nth-child(1) { transition-delay: 0.1s; }
.slide-up:nth-child(2) { transition-delay: 0.2s; }
.slide-up:nth-child(3) { transition-delay: 0.3s; }
.slide-up:nth-child(4) { transition-delay: 0.4s; }
.slide-up:nth-child(5) { transition-delay: 0.5s; }
.slide-up:nth-child(6) { transition-delay: 0.6s; }
.slide-up:nth-child(7) { transition-delay: 0.7s; }
.slide-up:nth-child(8) { transition-delay: 0.8s; }

/* ============================================
   HUBBUY PROMOTIONAL MODAL
   ============================================ */
.promo-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
}

.promo-modal.active {
  display: flex;
}

.promo-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.promo-modal-content {
  position: relative;
  background: #FF9933;
  border: 2px solid rgba(255, 180, 100, 0.5);
  border-radius: 20px;
  padding: var(--spacing-xl) var(--spacing-lg);
  max-width: 500px;
  width: 100%;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  animation: modalFadeIn 0.4s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.promo-modal-close {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.promo-modal-close:hover {
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}

.promo-modal-logo {
  margin-bottom: var(--spacing-md);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
}

.hubbuy-logo-img {
  max-width: 220px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
  transition: transform var(--transition-base);
  object-fit: contain;
  will-change: transform;
}

.hubbuy-logo-img:hover {
  transform: scale(1.05);
}

.promo-modal-title {
  font-size: 3rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: var(--spacing-lg);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.promo-modal-message {
  font-size: var(--font-size-lg);
  color: #fff;
  margin-bottom: var(--spacing-lg);
  line-height: 1.5;
  font-weight: 600;
}

.promo-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-md) var(--spacing-2xl);
  background: #FF8C42;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  color: #fff;
  font-size: var(--font-size-lg);
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition-base);
  margin-bottom: var(--spacing-md);
  box-shadow: 0 4px 20px rgba(255, 140, 66, 0.5), 0 0 0 1px rgba(255, 200, 120, 0.3);
  position: relative;
  overflow: hidden;
}

.promo-modal-btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: rotate(45deg);
  animation: shine 3s infinite;
}

@keyframes shine {
  0% {
    left: -50%;
  }
  50%, 100% {
    left: 150%;
  }
}

.promo-modal-btn:hover {
  background: #FF9549;
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
  box-shadow: 0 6px 25px rgba(255, 140, 66, 0.6), 0 0 0 1px rgba(255, 200, 120, 0.4);
}

.promo-modal-btn span,
.promo-modal-btn {
  position: relative;
  z-index: 1;
}

.promo-modal-tip {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .promo-modal-content {
    padding: var(--spacing-lg) var(--spacing-md);
    max-width: 90%;
  }
  
  .promo-modal-logo {
    min-height: 100px;
    margin-bottom: var(--spacing-sm);
  }
  
  .hubbuy-logo-img {
    max-width: 180px;
  }
  
  .promo-modal-title {
    font-size: 2.5rem;
  }
  
  .promo-modal-message {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-md);
  }
  
  .promo-modal-btn {
    padding: var(--spacing-sm) var(--spacing-xl);
    font-size: var(--font-size-base);
  }
}

/* ============================================
   REGISTRATION MODAL
   ============================================ */
.register-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Optimización: usar GPU acceleration y evitar repaints */
  transform: translateZ(0);
  will-change: opacity, transform;
  opacity: 0;
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  pointer-events: none;
  /* Evitar que cause lag al aparecer */
  contain: layout style paint;
}

.register-modal.active {
  display: flex;
  opacity: 1;
  pointer-events: auto;
  transform: translateZ(0) scale(1);
}

.register-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  /* Remover backdrop-filter para mejor rendimiento */
  /* backdrop-filter: blur(4px); */
  /* -webkit-backdrop-filter: blur(4px); */
  /* Optimización: usar GPU */
  transform: translateZ(0);
  will-change: opacity;
}

@media (max-width: 640px) {
  .register-modal-backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
}

.register-modal-content {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl) var(--spacing-xl);
  max-width: 520px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg);
  /* Optimización: usar transform en lugar de animation para mejor rendimiento */
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  will-change: transform, opacity;
  /* Evitar repaints innecesarios */
  contain: layout style paint;
}

.register-modal.active .register-modal-content {
  transform: translateY(0) scale(1);
  opacity: 1;
}

:root[data-theme="light"] .register-modal-content {
  background: #ffffff;
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
}

.register-modal-close {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border-light);
  color: var(--text);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

:root[data-theme="light"] .register-modal-close {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0,0,0,.12);
  color: #1a1a1a;
}

.register-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--primary-color);
  transform: scale(1.1);
}

:root[data-theme="light"] .register-modal-close:hover {
  background: rgba(0, 0, 0, 0.1);
}

.register-modal-header {
  margin-bottom: var(--spacing-xl);
}

.register-modal-title {
  font-size: var(--font-size-3xl);
  font-weight: 900;
  color: var(--text);
  margin-bottom: var(--spacing-md);
  line-height: 1.2;
}

.register-modal-subtitle {
  font-size: var(--font-size-base);
  color: var(--muted);
  line-height: 1.6;
}

:root[data-theme="light"] .register-modal-subtitle {
  color: #4a5568;
}

.register-modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.register-benefits {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  text-align: left;
}

.register-benefit {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-card-2);
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  transition: all var(--transition-fast);
}

:root[data-theme="light"] .register-benefit {
  background: #f8f9fa;
  border-color: rgba(0,0,0,.08);
}

.register-benefit:hover {
  border-color: var(--primary-color);
  transform: translateX(4px);
}

.register-benefit svg {
  color: var(--primary-color);
  flex-shrink: 0;
}

.register-benefit span {
  color: var(--text);
  font-weight: 500;
  font-size: var(--font-size-base);
}

:root[data-theme="light"] .register-benefit span {
  color: #1a1a1a;
}

.register-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-md) var(--spacing-2xl);
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: var(--radius);
  color: var(--text-light);
  font-size: var(--font-size-lg);
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-md);
  width: 100%;
}

.register-modal-btn:hover {
  background: var(--primary-light);
  border-color: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

@media (max-width: 640px) {
  .register-modal {
    padding: 0;
    align-items: flex-end; /* Alinear al fondo en móviles */
    justify-content: flex-end;
  }
  
  .register-modal-content {
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-xl);
    max-width: 100%;
    width: 100%;
    max-height: 85vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow-y: auto;
    margin-top: auto; /* Empujar hacia abajo */
    animation: slideUpMobile 0.3s ease-out;
    -webkit-overflow-scrolling: touch;
  }
  
  .register-modal-header {
    margin-bottom: var(--spacing-md);
  }
  
  .register-modal-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-xs);
  }
  
  .register-modal-subtitle {
    font-size: var(--font-size-xs);
    line-height: 1.5;
  }
  
  .register-modal-body {
    gap: var(--spacing-md);
  }
  
  .register-benefits {
    gap: var(--spacing-xs);
  }
  
  .register-benefit {
    padding: var(--spacing-sm);
    gap: var(--spacing-sm);
  }
  
  .register-benefit svg {
    width: 20px;
    height: 20px;
  }
  
  .register-benefit span {
    font-size: var(--font-size-sm);
  }
  
  .register-modal-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-base);
  }
  
  .register-modal-close {
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    width: 32px;
    height: 32px;
    font-size: 20px;
  }
}

@keyframes slideUpMobile {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-center { text-align: center; }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }

/* ============================================
   CONFIGURATION PANEL (dropdown)
   ============================================ */
.config-panel {
  position: fixed;
  top: 62px;
  right: 16px;
  left: auto;
  bottom: auto;
  width: auto;
  height: auto;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 10000;
  padding: 0;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.config-panel.active {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

/* floating content */
.config-panel-content {
  background: #1c1c1c;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  width: 260px;
  max-height: calc(90vh - 100px);
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,0.8);
  padding: 8px;
  color: #fff;
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  transform-origin: top right;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

:root[data-theme="dark"] .config-panel-content {
  background: #1c1c1c;
  border-color: rgba(255,255,255,.08);
}

.config-panel.active .config-panel-content { 
  opacity: 1;
  transform: translateY(0) scale(1);
}

.config-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.1rem .6rem;
  border-bottom: none;
}

.config-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

:root[data-theme="light"] .config-title,
:root[data-theme="dark"] .config-title {
  color: #fff;
}

.config-close {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.6);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background .15s, color .15s;
}

:root[data-theme="light"] .config-close,
:root[data-theme="dark"] .config-close {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.1);
  color: rgba(255,255,255,.6);
}

.config-close:hover {
  background: rgba(255,255,255,.14);
  color: #fff;
  transform: none;
  border-color: rgba(255,255,255,.15);
  box-shadow: none;
}

:root[data-theme="light"] .config-close:hover {
  background: rgba(255,255,255,.14);
  color: #fff;
  border-color: rgba(255,255,255,.15);
  box-shadow: none;
}

.config-section {
  padding: .5rem .9rem .8rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

:root[data-theme="dark"] .config-section {
  border-bottom-color: rgba(255,255,255,.06);
}

.config-section:last-child { border-bottom: none; }

.config-section-title {
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255,255,255,.45);
  margin-bottom: .45rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

:root[data-theme="light"] .config-section-title,
:root[data-theme="dark"] .config-section-title {
  color: rgba(255,255,255,.45);
}

.config-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

/* option buttons */
.config-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.75rem;
  background: var(--bg-card-2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast),
              border-color var(--transition-fast), box-shadow var(--transition-fast), color 0.3s ease;
  text-align: left;
  width: 100%;
}

:root[data-theme="dark"] .config-option {
  background: rgba(0,0,0,.25);
  border-color: rgba(255,255,255,.10);
  color: #fff;
}

.config-option:hover {
  transform: translateY(-1px);
  border-color: rgba(220,38,38,.60);
  background: rgba(220,38,38,.12);
  box-shadow: var(--glow);
}

:root[data-theme="light"] .config-option:hover {
  border-color: var(--primary-color);
  background: rgba(220,38,38,.08);
  box-shadow: var(--shadow-sm);
}

.config-option.active {
  border-color: rgba(220,38,38,.90);
  background: rgba(220,38,38,.16);
  box-shadow: var(--glow);
  color: var(--primary-light);
}

:root[data-theme="light"] .config-option.active {
  border-color: var(--primary-color);
  background: rgba(220,38,38,.12);
  box-shadow: var(--shadow-sm);
  color: var(--primary-color);
}

.config-option .check-icon { display: none; flex-shrink: 0; width: 14px; height: 14px; }
.config-option.active .check-icon { display: block; color: var(--primary-light); }

:root[data-theme="light"] .config-option.active .check-icon {
  color: var(--primary-color);
}

/* agent option extra padding */
.agent-option { padding: 0.6rem 0.75rem; }
.agent-name { color: inherit; font-size: var(--font-size-sm); }

@media (max-width: 767px) {
  .config-panel-content {
    max-width: calc(100% - 16px);
    max-height: calc(85vh - 100px);
    border-radius: 12px;
  }
}

/* ============================================
   FEATURED PRODUCTS CAROUSEL
   ============================================ */
.featured-products-carousel {
  background: transparent;
  padding: var(--spacing-2xl) 0;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.carousel-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  /* Asegurar que no se corten los items */
  padding: 0;
  min-height: 200px !important;
  height: 200px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: transparent !important;
}

.carousel-container { 
  width: 100%; 
  overflow: hidden;
  /* Asegurar que los items no se corten */
  position: relative;
}

.carousel-track {
  display: flex;
  gap: var(--spacing-lg);
  animation: scroll 60s linear infinite;
  will-change: transform;
  contain: layout style paint;
  /* Asegurar que el loop sea suave sin cortes */
  animation-fill-mode: both;
  /* Asegurar que los items no se corten */
  min-width: max-content;
  width: max-content;
  /* Asegurar que el track tenga suficiente espacio */
  flex-wrap: nowrap;
}
.carousel-wrapper:hover .carousel-track { 
  animation-play-state: paused; 
}

@keyframes scroll {
  0% { 
    transform: translateX(0); 
  }
  100% { 
    /* Mover exactamente ~14.28% (1/7) para que cuando se resetee, los clones estén en la misma posición */
    /* Esto funciona porque duplicamos los items 6 veces = 7 sets totales */
    transform: translateX(-14.2857%); 
  }
}

.carousel-item { 
  flex: 0 0 auto; 
  width: 280px;
  /* Asegurar que las imágenes se muestren correctamente */
  min-width: 280px;
  max-width: 280px;
  /* Evitar que se compriman o corten */
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .carousel-item {
    width: 200px; /* Más pequeño en móvil */
    min-width: 200px;
    max-width: 200px;
  }
  
  .carousel-product-image {
    height: 180px; /* Más compacto */
  }
  
  .carousel-product-name {
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
  }
}

.carousel-product-card {
  display: block;
  background: rgba(11,15,26,.78);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
  height: 100%;
  box-shadow: var(--shadow-sm);
  will-change: transform;
}

:root[data-theme="light"] .carousel-product-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.carousel-product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--glow-strong);
  border-color: rgba(220,38,38,.55);
}

:root[data-theme="light"] .carousel-product-card:hover {
  box-shadow: 0 4px 16px rgba(220,38,38,.2);
  border-color: rgba(220,38,38,.4);
}

.carousel-product-image {
  width: 100%;
  height: 200px;
  background: #05070f;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
  position: relative;
}

:root[data-theme="light"] .carousel-product-image {
  background: #f5f5f5;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

@media (max-width: 640px) {
  .carousel-product-image {
    height: 150px;
  }
}

.carousel-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
  will-change: transform;
  /* Optimización: mejor renderizado de imágenes */
  image-rendering: auto;
  /* Asegurar que las imágenes se carguen correctamente */
  display: block;
  background: #05070f;
}

:root[data-theme="light"] .carousel-product-image img {
  background: #f5f5f5;
}

.carousel-product-card:hover .carousel-product-image img {
  transform: scale(1.05);
}

.carousel-product-image .image-placeholder {
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: var(--font-size-base);
  text-align: center;
}

.carousel-product-name {
  font-size: var(--font-size-base);
  font-weight: 900;
  color: #ffffff;
  padding: var(--spacing-md);
  text-align: center;
  margin: 0;
}

:root[data-theme="light"] .carousel-product-name {
  color: #1a1a1a;
  background: #ffffff;
}

@media (max-width: 640px) {
  .carousel-product-name {
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
  }
}

@media (min-width: 768px) {
  .carousel-item { width: 320px; }
}

/* ============================================
   COMMUNITY / DISCORD SECTION
   ============================================ */
.community-section {
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(220,38,38,.16), rgba(0,0,0,0) 60%),
    rgba(11,15,26,.25);
  color: #ffffff;
  padding: var(--spacing-xl) 0;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.06);
}

@media (max-width: 640px) {
  .community-section {
    padding: var(--spacing-lg) 0;
  }
  
  .community-title {
    font-size: var(--font-size-xl);
  }
  
  .community-text {
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
  }
  
  .btn-large {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-base);
  }
}

.community-content { max-width: 850px; margin: 0 auto; }
.community-title {
  font-size: var(--font-size-3xl);
  font-weight: 900;
  margin-bottom: var(--spacing-md);
  color: #fff;
}
.community-text {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-xl);
  color: var(--muted-2);
}

/* --------------------------------------------
   Small polish: selection / focus
   -------------------------------------------- */
:focus-visible {
  outline: 2px solid rgba(220,38,38,.85);
  outline-offset: 2px;
  border-radius: 10px;
}
::selection {
  background: rgba(220,38,38,.35);
}
.tax-page {
    min-height: 100vh;
    background: #000;
  }
  
  .tax-title {
    font-size: 3rem;
    text-align: center;
    margin-top: 10px;
  }
  
  .tax-subtitle {
    text-align: center;
    opacity: .7;
    margin-bottom: 40px;
  }
  
  .badge {
    display: inline-block;
    margin: 0 auto;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
  }
  
  .tax-result-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  
  .btn-clear {
    background:#2a0f0f;
    color:#ff6b6b;
    border:1px solid rgba(255,0,0,.3);
    padding:6px 12px;
    border-radius:8px;
    cursor:pointer;
  }

/* ============================================
   TAX CALCULATOR SECTION (REDESIGNED - PREMIUM)
   ============================================ */

.tax-calculator-section {
    background-color: #000000;
    padding: var(--spacing-lg) 0 var(--spacing-xl);
    min-height: auto;
}

:root[data-theme="light"] .tax-calculator-section {
    background-color: var(--bg);
}

.calculator-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Header Badge */
.calculator-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #ef4444 0%, #991b1b 100%);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 auto var(--spacing-sm);
    text-align: center;
    width: fit-content;
}

.calculator-badge svg {
    width: 14px;
    height: 14px;
}

/* Main Title */
.calculator-main-title {
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin-bottom: 4px;
    line-height: 1.1;
}

:root[data-theme="light"] .calculator-main-title {
    color: #1a1a1a;
}

.calculator-main-subtitle {
    font-size: var(--font-size-base);
    color: var(--text-light);
    text-align: center;
    margin-bottom: var(--spacing-md);
    opacity: 0.7;
}

:root[data-theme="light"] .calculator-main-subtitle {
    color: #4a5568;
    opacity: 0.8;
}

/* Exchange Rates Card */
.exchange-rates-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
    background-color: #1a1a1a;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    width: 100%;
}

:root[data-theme="light"] .exchange-rates-card {
    background-color: #ffffff;
    border-color: rgba(0,0,0,.12);
    box-shadow: var(--shadow-sm);
}

.exchange-rates-left {
    display: flex;
    gap: var(--spacing-lg);
    flex: 1;
}

.exchange-rates-right {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
    flex-shrink: 0;
}

.exchange-rate-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
}

.exchange-label {
    font-size: 11px;
    color: var(--text-light);
    opacity: 0.6;
}

:root[data-theme="light"] .exchange-label {
    color: #4a5568;
    opacity: 0.7;
}

.exchange-value {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #ffffff;
}

:root[data-theme="light"] .exchange-value {
    color: #1a1a1a;
}

/* Inline Toggle Items */
.inline-toggle-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.inline-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inline-toggle-label {
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
}

:root[data-theme="light"] .inline-toggle-label {
    color: #1a1a1a;
}

.inline-toggle-subtitle {
    font-size: 10px;
    color: var(--text-light);
    opacity: 0.7;
}

:root[data-theme="light"] .inline-toggle-subtitle {
    color: #4a5568;
    opacity: 0.8;
}

.inline-toggle-item .toggle-switch {
    margin-left: 0;
    flex-shrink: 0;
}

/* Main Calculator Container */
.calculator-main-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

@media (min-width: 1024px) {
    .calculator-main-container {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-md);
    }
}

/* Input Column */
.calculator-inputs-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.input-step-card {
    background-color: #1a1a1a;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: var(--spacing-lg);
    transition: all 0.2s ease;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

:root[data-theme="light"] .input-step-card {
    background-color: #ffffff;
    border-color: rgba(0,0,0,.12);
    box-shadow: var(--shadow-sm);
}

.input-step-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.15);
    border-color: rgba(30, 58, 138, 0.4);
}

:root[data-theme="light"] .input-step-card:hover {
    box-shadow: var(--shadow-md);
    border-color: rgba(220,38,38,.3);
}

.step-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.step-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-light);
    background-color: rgba(30, 58, 138, 0.1);
    flex-shrink: 0;
}

:root[data-theme="light"] .step-icon {
    border-color: rgba(220,38,38,.3);
    color: var(--primary-color);
    background-color: rgba(220,38,38,.08);
}

.step-icon svg {
    width: 22px;
    height: 22px;
}

.step-label {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: #ffffff;
}

:root[data-theme="light"] .step-label {
    color: #1a1a1a;
}

.step-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background-color: #0a0a0a;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: var(--spacing-md) var(--spacing-lg);
    transition: all 0.2s ease;
    min-height: 56px;
}

:root[data-theme="light"] .step-input-wrapper {
    background-color: #ffffff;
    border-color: rgba(0,0,0,.2);
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

.step-input-wrapper:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.2);
}

:root[data-theme="light"] .step-input-wrapper:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(220,38,38,.15);
}

.input-currency {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-light);
    min-width: 44px;
}

:root[data-theme="light"] .input-currency {
    color: #1a1a1a;
    font-weight: 700;
}

.step-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    outline: none;
    padding: 8px 0;
}

:root[data-theme="light"] .step-input {
    color: #1a1a1a;
    font-weight: 700;
}

.step-input::placeholder {
    color: var(--text-light);
    opacity: 0.3;
}

:root[data-theme="light"] .step-input::placeholder {
    color: #9ca3af;
    opacity: 0.6;
}

/* Results Column */
.calculator-results-column {
    display: flex;
}

.results-card {
    width: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
    border: 1px solid rgba(220,38,38,.3);
    border-radius: var(--radius);
    padding: var(--spacing-md);
    position: relative;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(220,38,38,.1);
    transition: all 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

:root[data-theme="light"] .results-card {
    background: #ffffff;
    border-color: rgba(220,38,38,.2);
    box-shadow: var(--shadow-md);
}

.results-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(220,38,38,.3), 0 0 40px rgba(220,38,38,.15);
    transform: translateY(-2px);
    border-color: rgba(220,38,38,.4);
}

:root[data-theme="light"] .results-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: rgba(220,38,38,.3);
}

:root[data-theme="dark"] .results-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 183, 195, 0.3), 0 0 40px rgba(0, 183, 195, 0.15);
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-xs);
}

.results-title-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
}

.results-title-wrapper svg {
    color: var(--primary-light);
    width: 18px;
    height: 18px;
}

:root[data-theme="light"] .results-title-wrapper svg {
    color: var(--primary-color);
}

.results-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

:root[data-theme="light"] .results-title {
    color: #1a1a1a;
}

.results-subtitle {
    font-size: 11px;
    color: var(--text-light);
    opacity: 0.6;
    margin-bottom: var(--spacing-xs);
}

:root[data-theme="light"] .results-subtitle {
    color: #4a5568;
    opacity: 0.7;
}

.franquicia-status {
    font-size: 11px;
    color: var(--primary-light);
    margin-bottom: var(--spacing-sm);
    font-weight: 500;
    opacity: 0.9;
}

:root[data-theme="light"] .franquicia-status {
    color: var(--primary-color);
}

.btn-clear-calc {
    background-color: rgba(30, 58, 138, 0.2);
    color: var(--primary-light);
    border: 1px solid rgba(30, 58, 138, 0.3);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

:root[data-theme="light"] .btn-clear-calc {
    background-color: rgba(220,38,38,.1);
    color: var(--primary-color);
    border-color: rgba(220,38,38,.2);
}

.btn-clear-calc:hover {
    background-color: rgba(30, 58, 138, 0.3);
    border-color: rgba(30, 58, 138, 0.5);
}

:root[data-theme="light"] .btn-clear-calc:hover {
    background-color: rgba(220,38,38,.15);
    border-color: rgba(220,38,38,.3);
}

/* Result Boxes */
.result-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--spacing-sm);
    border-radius: 8px;
    margin-bottom: var(--spacing-sm);
    background-color: #0a0a0a;
    border: 1.5px solid transparent;
}

:root[data-theme="light"] .result-box {
    background-color: #f8f9fa;
    border-color: rgba(220,38,38,.2);
}

.result-box-usd {
    border-color: rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, #0a0a0a 0%, rgba(59, 130, 246, 0.05) 100%);
}

:root[data-theme="light"] .result-box-usd {
    border-color: rgba(220,38,38,.3);
    background: #f0f4ff;
}

.result-box-ars {
    border-color: rgba(59, 130, 246, 0.5);
    background: linear-gradient(135deg, #0a0a0a 0%, rgba(59, 130, 246, 0.08) 100%);
}

:root[data-theme="light"] .result-box-ars {
    border-color: rgba(220,38,38,.4);
    background: #e8f0ff;
}

.result-box-label {
    font-size: 11px;
    color: var(--text-light);
    opacity: 0.7;
}

:root[data-theme="light"] .result-box-label {
    color: #4a5568;
    opacity: 0.8;
}

.result-box-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.result-box-value.animate {
    animation: numberPulse 0.4s ease;
}

@keyframes numberPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.result-box-usd .result-box-value {
    color: #f87171;
}

:root[data-theme="light"] .result-box-usd .result-box-value {
    color: #991b1b;
}

.result-box-ars .result-box-value {
    color: #f87171;
}

:root[data-theme="light"] .result-box-ars .result-box-value {
    color: #dc2626;
}

.result-box-note {
    font-size: 10px;
    color: var(--text-light);
    opacity: 0.5;
    margin-top: 2px;
}

:root[data-theme="light"] .result-box-note {
    color: #4a5568;
    opacity: 0.7;
}

.calculation-summary {
    font-size: 10px;
    color: var(--text-light);
    opacity: 0.5;
    margin-top: var(--spacing-xs);
    margin-bottom: 0;
    text-align: center;
    font-style: italic;
}

:root[data-theme="light"] .calculation-summary {
    color: #4a5568;
    opacity: 0.7;
}


.config-toggle-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toggle-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.toggle-label {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: #ffffff;
}

.toggle-description {
    font-size: var(--font-size-sm);
    color: var(--text-light);
    opacity: 0.7;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
    margin-left: var(--spacing-md);
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #2a2a2a;
    border: 1px solid var(--border-color);
    transition: var(--transition-base);
    border-radius: 26px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #ffffff;
    transition: var(--transition-base);
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

@media (max-width: 767px) {
    .calculator-main-title {
        font-size: 2rem;
    }
    
    .exchange-rates-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .exchange-rates-left {
        width: 100%;
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .exchange-rates-right {
        width: 100%;
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: flex-start;
    }
    
    .exchange-rate-item {
        min-width: auto;
    }
    
    .result-box-value {
        font-size: 1.5rem;
    }
    
    .calculator-wrapper {
        padding: 0 var(--spacing-sm);
    }
}

/* ============================================
   WHEEL WIDGET (Ruleta Flotante Siempre Visible)
   ============================================ */

.wheel-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Botón flotante siempre visible */
.wheel-floating {
    position: relative;
}

.wheel-toggle-btn {
    background: linear-gradient(135deg, #dc2626 0%, #f87171 100%);
    color: #fff;
    border: none;
    padding: 1rem 1.5rem;
    border-radius: 50px;
    box-shadow: 0 6px 25px rgba(43, 91, 255, 0.5), 0 0 20px rgba(43, 91, 255, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 800;
    font-size: 1rem;
    transition: all 0.3s ease;
    animation: float 3s ease-in-out infinite, glow 2s ease-in-out infinite;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wheel-toggle-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(43, 91, 255, 0.6), 0 0 30px rgba(43, 91, 255, 0.4);
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 6px 25px rgba(43, 91, 255, 0.5), 0 0 20px rgba(43, 91, 255, 0.3); }
    50% { box-shadow: 0 6px 30px rgba(43, 91, 255, 0.7), 0 0 30px rgba(43, 91, 255, 0.5); }
}

.wheel-toggle-icon {
    font-size: 1.25rem;
}

.wheel-toggle-text {
    white-space: nowrap;
}

/* Popup de la ruleta (Diseño básico como la foto) */
.wheel-popup {
    position: absolute;
    bottom: 70px;
    right: 0;
    width: 300px;
    background: #fff;
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.95);
    transition: all 0.3s ease;
    border: 1px solid #e5e5e5;
}

.wheel-popup.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.wheel-popup-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: transparent;
    border: none;
    color: #999;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.2s ease;
    font-weight: 300;
}

.wheel-popup-close:hover {
    color: #333;
    background: rgba(0, 0, 0, 0.05);
}

.wheel-popup-header {
    text-align: center;
    margin-bottom: 0.75rem;
}

.wheel-popup-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.25rem;
}

.wheel-popup-subtitle {
    font-size: 0.75rem;
    color: #999;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wheel-container-floating {
    position: relative;
    width: 260px;
    height: 260px;
    margin: 0 auto;
}

.wheel-main {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 4px solid #fff;
    box-shadow: 
        0 0 0 2px rgba(0, 0, 0, 0.05),
        inset 0 0 30px rgba(0, 0, 0, 0.1),
        0 8px 32px rgba(0, 0, 0, 0.15);
    transition: transform 3s cubic-bezier(0.17, 0.67, 0.12, 0.99);
    transform-origin: center;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.wheel-main.spinning {
    pointer-events: none;
}

.wheel-segment-floating {
    position: absolute;
    width: 50%;
    height: 50%;
    top: 0;
    left: 50%;
    transform-origin: 0 100%;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 18%;
    box-sizing: border-box;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    transition: filter 0.2s ease;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.wheel-segment-floating::before {
    content: attr(data-prize);
    transform: rotate(22.5deg);
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.3px;
    max-width: 90px;
    overflow: visible;
    text-overflow: ellipsis;
}

.wheel-segment-floating::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.05) 100%);
    pointer-events: none;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* Segmentos naranjas con gradiente moderno */
.wheel-segment-floating:nth-child(1) {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: #fff;
    transform: rotate(0deg);
    box-shadow: inset 0 2px 4px rgba(255, 107, 53, 0.3);
}

.wheel-segment-floating:nth-child(1)::before {
    font-weight: 800;
    font-size: 0.8rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    max-width: 100px;
}

.wheel-segment-floating:nth-child(2) {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    color: #1a1a1a;
    transform: rotate(45deg);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.wheel-segment-floating:nth-child(2)::before {
    font-weight: 700;
    font-size: 0.8rem;
}

.wheel-segment-floating:nth-child(3) {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: #fff;
    transform: rotate(90deg);
    box-shadow: inset 0 2px 4px rgba(255, 107, 53, 0.3);
}

.wheel-segment-floating:nth-child(3)::before {
    font-weight: 800;
    font-size: 0.8rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    max-width: 100px;
}

.wheel-segment-floating:nth-child(4) {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    color: #1a1a1a;
    transform: rotate(135deg);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.wheel-segment-floating:nth-child(4)::before {
    font-weight: 700;
    font-size: 0.8rem;
}

.wheel-segment-floating:nth-child(5) {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: #fff;
    transform: rotate(180deg);
    box-shadow: inset 0 2px 4px rgba(255, 107, 53, 0.3);
}

.wheel-segment-floating:nth-child(5)::before {
    font-weight: 800;
    font-size: 0.8rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    max-width: 100px;
}

.wheel-segment-floating:nth-child(6) {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    color: #1a1a1a;
    transform: rotate(225deg);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.wheel-segment-floating:nth-child(6)::before {
    font-weight: 700;
    font-size: 0.8rem;
}

.wheel-segment-floating:nth-child(7) {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: #fff;
    transform: rotate(270deg);
    box-shadow: inset 0 2px 4px rgba(255, 107, 53, 0.3);
}

.wheel-segment-floating:nth-child(7)::before {
    font-weight: 800;
    font-size: 0.8rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    max-width: 100px;
}

.wheel-segment-floating:nth-child(8) {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    color: #1a1a1a;
    transform: rotate(315deg);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.wheel-segment-floating:nth-child(8)::before {
    font-weight: 700;
    font-size: 0.8rem;
}

.wheel-pointer-floating {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-top: 32px solid #1a1a1a;
    z-index: 10;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transition: filter 0.2s ease;
}

.wheel-pointer-floating::before {
    content: '';
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 28px solid #ff6b35;
    z-index: -1;
}

.wheel-spin-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
    color: #fff;
    border: 3px solid #fff;
    font-weight: 800;
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 2px 4px rgba(255, 255, 255, 0.1),
        0 0 0 2px rgba(255, 107, 53, 0.2);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 20;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.wheel-spin-center:hover:not(:disabled) {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 
        0 6px 16px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.15),
        0 0 0 3px rgba(255, 107, 53, 0.3);
    background: linear-gradient(135deg, #2a2a2a 0%, #0a0a0a 100%);
}

.wheel-spin-center:active:not(:disabled) {
    transform: translate(-50%, -50%) scale(1.02);
}

.wheel-spin-center:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: translate(-50%, -50%) scale(1);
}

/* Modal de Premio Ganado (Simplificado) */
.prize-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.prize-modal.active {
    opacity: 1;
    visibility: visible;
}

.prize-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}

.prize-modal-content {
    position: relative;
    background: linear-gradient(135deg, #0b0f1a 0%, #1a1f2e 100%);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    max-width: 350px;
    width: 90%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    transform: scale(0.95);
    transition: transform 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.prize-modal.active .prize-modal-content {
    transform: scale(1);
}

.prize-icon {
    font-size: 3rem;
    margin-bottom: 0.75rem;
}

.prize-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffd700;
    margin-bottom: 0.75rem;
}

.prize-message {
    font-size: 1rem;
    color: #fff;
    margin-bottom: 1.5rem;
}

#prizeText {
    font-weight: 700;
    color: #ffd700;
    font-size: 1.2rem;
}

.prize-register-btn {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, #dc2626 0%, #f87171 100%);
    color: #fff;
    padding: 0.875rem;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(43, 91, 255, 0.4);
    transition: all 0.2s ease;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
}

.prize-register-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(43, 91, 255, 0.5);
}

.prize-close-btn {
    display: block;
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.625rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.prize-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

@media (max-width: 640px) {
    .wheel-widget {
        bottom: 15px;
        right: 15px;
    }
    
    .wheel-mini {
        width: 260px;
    }
    
    .wheel-container-mini {
        width: 180px;
        height: 180px;
    }
    
    .prize-modal-content {
        padding: 1.5rem 1rem;
    }
}

/* ============================================
   QC MODAL (Quality Check Viewer)
   ============================================ */
.qc-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.qc-modal.active {
    opacity: 1;
    visibility: visible;
}

.qc-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(8px);
    cursor: pointer;
}

.qc-modal-content {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    max-width: 95vw;
    max-height: 95vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    z-index: 1;
    animation: qcModalFadeIn 0.3s ease-out;
}

@keyframes qcModalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.qc-modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.qc-modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.qc-modal-close {
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    transition: all 0.2s ease;
}

.qc-modal-close:hover {
    background: var(--bg-hover);
    color: var(--text);
    transform: rotate(90deg);
}

.qc-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.qc-main-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
}

.qc-main-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--bg-secondary);
}

.qc-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.qc-gallery-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    background: var(--bg-secondary);
}

.qc-gallery-item:hover {
    border-color: var(--primary-color);
    transform: scale(1.05);
}

.qc-gallery-item.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-color);
}

.qc-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qc-product-info {
    padding-top: 1rem;
    border-top: 1px solid var(--border-light);
}

.qc-product-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.qc-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.qc-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.qc-meta-label {
    font-size: 0.875rem;
    color: var(--muted);
    font-weight: 500;
}

.qc-meta-value {
    font-size: 1rem;
    color: var(--text);
    font-weight: 600;
}

.qc-no-images {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted);
}

.qc-no-images-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Botón para ver QC en la tarjeta de producto */
.product-image {
    position: relative;
    cursor: pointer;
}

.product-image::after {
    content: '👁️ Ver QC';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 10;
}

.product-card:hover .product-image::after {
    opacity: 1;
}

@media (min-width: 768px) {
    .qc-modal-content {
        max-width: 900px;
    }
    
    .qc-modal-body {
        flex-direction: row;
    }
    
    .qc-main-image-container {
        flex: 1;
        max-width: 500px;
    }
    
    .qc-product-info {
        flex: 0 0 300px;
        padding-top: 0;
        padding-left: 1.5rem;
        border-top: none;
        border-left: 1px solid var(--border-light);
    }
    
    .qc-gallery {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
}

@media (max-width: 767px) {
    .qc-modal-content {
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .qc-modal-header {
        padding: 1rem;
    }
    
    .qc-modal-body {
        padding: 1rem;
    }
    
    .qc-gallery {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================
   SELLERS PAGE
   ============================================ */
.sellers-filters-section {
    padding: 2rem 0;
    background: transparent;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 2rem;
}

.sellers-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-start;
    align-items: center;
}

.seller-category-btn {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
    text-decoration: none;
}

.seller-category-btn:hover {
    color: var(--text);
}

.seller-category-btn.active {
    color: var(--primary-color);
    font-weight: 600;
}

.seller-category-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary-color);
    border-radius: 2px;
}

.sellers-page-section {
    padding: 0 0 4rem 0;
    min-height: 60vh;
}

.sellers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.seller-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.seller-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(43, 91, 255, 0.1);
}

.seller-header {
    padding: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.seller-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    border: 1px solid var(--border-light);
    overflow: hidden;
}

.seller-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.seller-info {
    flex: 1;
    min-width: 0;
}

.seller-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.375rem;
    word-wrap: break-word;
    line-height: 1.4;
}

.seller-platform {
    font-size: 0.8125rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.seller-platform-icon {
    width: 14px;
    height: 14px;
}

.seller-body {
    padding: 0 1.25rem 1.25rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.seller-stats {
    display: flex;
    gap: 1.5rem;
}

.seller-stat {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.seller-stat-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
}

.seller-stat-label {
    font-size: 0.75rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


.seller-footer {
    padding: 0 1.25rem 1.25rem 1.25rem;
    display: flex;
    gap: 0.5rem;
}

.seller-btn {
    flex: 1;
    padding: 0.625rem 1rem;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.seller-btn:hover {
    background: var(--primary-color-hover);
    opacity: 0.9;
}

.seller-btn-secondary {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border-light);
    padding: 0.625rem 0.75rem;
    flex: 0 0 auto;
}

.seller-btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--primary-color);
}

.seller-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border-radius: 12px;
    font-size: 0.6875rem;
    font-weight: 600;
    margin-left: auto;
}

@media (max-width: 768px) {
    .sellers-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .sellers-filters-section {
        padding: 1.5rem 0;
    }
    
    .sellers-categories {
        gap: 0.375rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.5rem;
    }
    
    .sellers-categories::-webkit-scrollbar {
        display: none;
    }
    
    .seller-category-btn {
        padding: 0.5rem 0.875rem;
        font-size: 0.875rem;
    }
    
    .seller-stats {
        gap: 1rem;
    }
    
    .seller-card {
        border-radius: var(--radius);
    }
}

/* ============================================
   MEJORAS GENERALES PARA MÓVILES
   ============================================ */

@media (max-width: 767px) {
  /* Mejorar inputs y selects para móviles */
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px; /* Evita zoom automático en iOS */
    min-height: 44px; /* Tamaño mínimo táctil */
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    -webkit-appearance: none;
    appearance: none;
  }
  
  /* Mejorar contenedores */
  .container {
    padding: 0 var(--spacing-sm);
    max-width: 100%;
  }
  
  /* Mejorar textos generales */
  body {
    font-size: 15px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
  }
  
  p {
    margin-bottom: 1rem;
    line-height: 1.6;
  }
  
  h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    margin-bottom: 0.75rem;
  }
  
  /* Mejorar scroll en móviles */
  html {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  
  /* Mejorar touch targets */
  a, button {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Mejorar espaciados en secciones */
  .page-header {
    padding: var(--spacing-md) 0;
  }
  
  .page-title {
    font-size: 1.75rem;
    line-height: 1.2;
  }
  
  .page-subtitle {
    font-size: 0.95rem;
    line-height: 1.5;
  }
  
  /* Mejorar CTA buttons */
  .cta-btn {
    min-height: 48px;
    font-size: 1rem;
    padding: 0.875rem 1.5rem;
  }
  
  /* Mejorar feature cards */
  .feature-card {
    padding: var(--spacing-md);
  }
  
  .feature-card h3 {
    font-size: 1.1rem;
  }
  
  /* Mejorar paginación */
  .pagination-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.625rem 0.875rem;
    font-size: 0.9rem;
  }
  
  /* Mejorar filtros y sidebar */
  .filter-section-header,
  .category-btn,
  .quality-btn,
  .brand-btn {
    min-height: 44px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
  }
  
  /* Mejorar modales */
  .register-modal-content,
  .prize-modal-content,
  .config-panel-content {
    max-width: 95vw;
    margin: var(--spacing-sm);
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Mejorar carousel */
  .carousel-item {
    min-width: 85vw;
  }
  
  /* Prevenir selección accidental de texto */
  .btn,
  button,
  .nav-link {
    -webkit-tap-highlight-color: rgba(43, 91, 255, 0.2);
    tap-highlight-color: rgba(43, 91, 255, 0.2);
  }
  
  /* Mejorar performance en móviles */
  * {
    -webkit-tap-highlight-color: transparent;
  }
  
  .btn,
  button,
  a[role="button"] {
    -webkit-tap-highlight-color: rgba(43, 91, 255, 0.15);
  }
}

/* Mejoras adicionales para pantallas muy pequeñas */
@media (max-width: 480px) {
  .container {
    padding: 0 var(--spacing-xs);
  }
  
  .hero-title {
    font-size: 1.5rem;
  }
  
  .section-title {
    font-size: 1.5rem;
  }
  
  .hero-title {
    font-size: 1.5rem;
  }
  
  .section-title {
    font-size: 1.5rem;
  }
  
  .page-title {
    font-size: 1.5rem;
  }
  
  .products-grid {
    gap: var(--spacing-xs);
    padding: 0 var(--spacing-xs);
  }
  
  .product .home-discovery .featured-products-modern .carousel-item {
    min-width: 156px !important;
    max-width: 156px !important;
  }
  
  .product-card {
    border-radius: var(--radius-sm);
  }
}

/* ================================================================
   LIGHT THEME OVERRIDES
   ================================================================ */
[data-theme="light"] body,
[data-theme="light"] {
  --dark: #f5f5f7;
  --darker: #ffffff;
  --darkest: #e8e8ed;
  --surface: #ffffff;
  --border: rgba(0,0,0,.1);
  --text: #1d1d1f;
  --muted: #6e6e73;
  --accent: #0066cc;
  --text-secondary: rgba(0,0,0,.55);
}
[data-theme="light"] body {
  background: #f5f5f7 !important;
  color: #1d1d1f !important;
}
/* Navbar */
[data-theme="light"] header,
[data-theme="light"] .header,
[data-theme="light"] .rs-navbar {
  background: rgba(255,255,255,.85) !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  backdrop-filter: blur(20px) !important;
}
[data-theme="light"] .rs-navbar .rs-nav-logo,
[data-theme="light"] header .logo-text a,
[data-theme="light"] .nav-link {
  color: #1d1d1f !important;
}
[data-theme="light"] .rs-nav-search {
  background: rgba(0,0,0,.06) !important;
  border-color: rgba(0,0,0,.1) !important;
  color: #1d1d1f !important;
}
[data-theme="light"] .rs-nav-search input { color: #1d1d1f !important; }
[data-theme="light"] .rs-nav-search input::placeholder { color: rgba(0,0,0,.4) !important; }
[data-theme="light"] .rs-nav-config { border-color: rgba(0,0,0,.15) !important; color: #1d1d1f !important; background: rgba(0,0,0,.04) !important; }
[data-theme="light"] .rs-nav-register { background: #0066cc !important; color: #fff !important; }
/* Hero */
[data-theme="light"] .rs-hero { background: linear-gradient(135deg, #f5f5f7 0%, #e8e8ed 100%) !important; }
[data-theme="light"] .rs-hero-mesh,
[data-theme="light"] .rs-hero-dots,
[data-theme="light"] .rs-hero-bg { opacity: .15 !important; }
[data-theme="light"] .rs-hero-title { color: #1d1d1f !important; }
[data-theme="light"] .rs-hero-desc { color: #6e6e73 !important; }
[data-theme="light"] .rs-hero-announcement { background: rgba(0,0,0,.06) !important; color: #1d1d1f !important; border-color: rgba(0,0,0,.1) !important; }
[data-theme="light"] .rs-btn-white { background: #1d1d1f !important; color: #fff !important; }
[data-theme="light"] .rs-btn-outline { border-color: rgba(0,0,0,.2) !important; color: #1d1d1f !important; }
[data-theme="light"] .rs-agent-pill { background: rgba(0,0,0,.06) !important; color: #1d1d1f !important; border-color: rgba(0,0,0,.1) !important; }
[data-theme="light"] .rs-agent-label { color: #6e6e73 !important; }
/* Sections */
[data-theme="light"] .rs-section { background: transparent !important; }
[data-theme="light"] .rs-section-title { color: #1d1d1f !important; }
[data-theme="light"] .rs-view-more { color: #0066cc !important; }
/* Product cards homepage */
[data-theme="light"] .home-featured-card,
[data-theme="light"] .rs-product-card-home {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
}
[data-theme="light"] .home-featured-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.1) !important; }
[data-theme="light"] .home-featured-meta h3,
[data-theme="light"] .home-featured-card .product-name { color: #1d1d1f !important; }
[data-theme="light"] .home-featured-meta span,
[data-theme="light"] .home-featured-meta .price-cny { color: #6e6e73 !important; }
/* Browse CTA */
[data-theme="light"] .rs-browse-cta { background: #e8e8ed !important; }
[data-theme="light"] .rs-browse-cta-bg { opacity: .3 !important; }
[data-theme="light"] .rs-browse-btn { background: rgba(0,0,0,.06) !important; color: #1d1d1f !important; border-color: rgba(0,0,0,.15) !important; }
[data-theme="light"] .rs-browse-btn:hover { background: rgba(0,0,0,.1) !important; border-color: rgba(0,0,0,.25) !important; }
/* Category cards */
[data-theme="light"] .rs-cat-card { background: #ffffff !important; border-color: rgba(0,0,0,.08) !important; }
[data-theme="light"] .rs-cat-card:hover { border-color: rgba(0,0,0,.2) !important; box-shadow: 0 8px 24px rgba(0,0,0,.08) !important; }
[data-theme="light"] .rs-cat-card h3 { color: #1d1d1f !important; }
[data-theme="light"] .rs-cat-card p { color: #6e6e73 !important; }
[data-theme="light"] .rs-cat-icon { background: rgba(0,102,204,.1) !important; color: #0066cc !important; }
/* Tools */
[data-theme="light"] .rs-tools-section { background: #ffffff !important; }
[data-theme="light"] .rs-tool-card { background: rgba(0,0,0,.03) !important; border-color: rgba(0,0,0,.08) !important; }
[data-theme="light"] .rs-tool-card:hover { border-color: rgba(0,0,0,.2) !important; }
[data-theme="light"] .rs-tool-card h3 { color: #1d1d1f !important; }
[data-theme="light"] .rs-tool-card p { color: #6e6e73 !important; }
[data-theme="light"] .rs-tools-title { color: #1d1d1f !important; }
[data-theme="light"] .rs-tools-desc { color: #6e6e73 !important; }
[data-theme="light"] .rs-tools-kicker { color: #0066cc !important; }
[data-theme="light"] .rs-why-card { background: rgba(0,0,0,.03) !important; border-color: rgba(0,0,0,.08) !important; }
[data-theme="light"] .rs-why-card h4 { color: #1d1d1f !important; }
[data-theme="light"] .rs-why-card p { color: #6e6e73 !important; }
[data-theme="light"] .rs-why-title { color: #1d1d1f !important; }
/* FAQ */
[data-theme="light"] .rs-faq-title { color: #1d1d1f !important; }
[data-theme="light"] .rs-faq-item { border-color: rgba(0,0,0,.1) !important; }
[data-theme="light"] .rs-faq-item summary { color: #1d1d1f !important; }
[data-theme="light"] .rs-faq-answer p { color: #6e6e73 !important; }
/* Footer */
[data-theme="light"] .rs-footer { background: #1d1d1f !important; color: #fff !important; }
[data-theme="light"] .rs-footer a { color: rgba(255,255,255,.7) !important; }
/* Config Panel */
[data-theme="light"] .config-panel-content { background: #ffffff !important; border-color: rgba(0,0,0,.1) !important; box-shadow: 0 16px 48px rgba(0,0,0,.15) !important; }
[data-theme="light"] .config-title { color: #1d1d1f !important; }
[data-theme="light"] .config-section-title { color: #6e6e73 !important; }
[data-theme="light"] .config-option { background: rgba(0,0,0,.04) !important; border-color: rgba(0,0,0,.1) !important; color: #1d1d1f !important; }
[data-theme="light"] .config-option:hover { background: rgba(0,0,0,.08) !important; }
[data-theme="light"] .config-option.active { background: rgba(0,102,204,.1) !important; border-color: #0066cc !important; color: #0066cc !important; }
[data-theme="light"] .config-close { color: #6e6e73 !important; }
/* Products page */
[data-theme="light"] .product-card { background: #ffffff !important; border-color: rgba(0,0,0,.08) !important; box-shadow: 0 2px 8px rgba(0,0,0,.06) !important; }
[data-theme="light"] .product-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; }
[data-theme="light"] .product-name { color: #1d1d1f !important; }
[data-theme="light"] .product-meta { color: #6e6e73 !important; }
[data-theme="light"] .price-cny { color: #1d1d1f !important; }
[data-theme="light"] .btn-primary { background: #0066cc !important; color: #fff !important; }
/* Products page category pills */
[data-theme="light"] .rs-pills-bar { background: rgba(255,255,255,.9) !important; border-color: rgba(0,0,0,.08) !important; }
[data-theme="light"] .rs-cat-pill { background: rgba(0,0,0,.05) !important; color: #6e6e73 !important; border-color: rgba(0,0,0,.1) !important; }
[data-theme="light"] .rs-cat-pill.active,
[data-theme="light"] .rs-cat-pill:hover { background: #1d1d1f !important; color: #fff !important; }
/* Filter drawer */
[data-theme="light"] .rs-filters-panel { background: #ffffff !important; border-color: rgba(0,0,0,.08) !important; }
[data-theme="light"] .rs-filters-panel h3 { color: #1d1d1f !important; }
[data-theme="light"] .rs-filters-panel label { color: #6e6e73 !important; }
/* Pagination */
[data-theme="light"] .pagination-btn { background: rgba(0,0,0,.05) !important; color: #1d1d1f !important; border-color: rgba(0,0,0,.1) !important; }
[data-theme="light"] .pagination-btn.active { background: #0066cc !important; color: #fff !important; }
/* Stat cards */
[data-theme="light"] .home-stat-card { background: #ffffff !important; border-color: rgba(0,0,0,.08) !important; }
[data-theme="light"] .home-stat-card .stat-value { color: #1d1d1f !important; }
[data-theme="light"] .home-stat-card .stat-label { color: #6e6e73 !important; }
/* QC Modal */
[data-theme="light"] .qc-modal-content { background: #ffffff !important; }
[data-theme="light"] .qc-product-name { color: #1d1d1f !important; }
/* Products grid bg */
[data-theme="light"] .rs-products-body { background: #f5f5f7 !important; }
[data-theme="light"] main { background: transparent !important; }

/* ---- "Ver Productos" / Browse Finds CTA ---- */
.rs-browse-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  overflow: hidden;
}
.rs-browse-cta-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 2px 2px, rgba(220,38,38,.25) 1px, transparent 0);
  background-size: 24px 24px;
  opacity: .5;
}
.rs-browse-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all .25s;
  backdrop-filter: blur(8px);
}
.rs-browse-btn:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.35);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

/* ================================================================
   REPSHEET.NET-STYLE PRODUCTS PAGE
   ================================================================ */

/* ---- Category Pills Bar ---- */
.rs-cat-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: rgba(0,0,0,.4);
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: sticky;
  top: 56px;
  z-index: 90;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.rs-cat-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  flex: 1;
  padding: 2px 0;
}
.rs-cat-pills::-webkit-scrollbar { display: none; }

.rs-cat-pill {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background: transparent;
  color: rgba(255,255,255,.6);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.rs-cat-pill:hover {
  border-color: rgba(255,255,255,.25);
  color: rgba(255,255,255,.85);
}
.rs-cat-pill.active {
  background: #fff;
  color: #000;
  border-color: #fff;
  font-weight: 600;
}

.rs-cat-arrow {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  background: transparent;
  color: rgba(255,255,255,.5);
  cursor: pointer;
  transition: all .2s;
}
.rs-cat-arrow:hover {
  border-color: rgba(255,255,255,.3);
  color: #fff;
}

.rs-filters-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.8);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
  margin-left: 8px;
}
.rs-filters-btn:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.25);
}

/* ---- Filters Slide-in Panel ---- */
.rs-filters-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.rs-filters-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.rs-filters-panel {
  position: fixed;
  top: 0;
  right: -400px;
  width: 380px;
  max-width: 90vw;
  height: 100vh;
  background: #111;
  z-index: 1000;
  transition: right .3s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(255,255,255,.08);
}
.rs-filters-panel.open {
  right: 0;
}

.rs-filters-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 24px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.rs-filters-panel-header h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.rs-filters-panel-header p {
  font-size: .8rem;
  color: rgba(255,255,255,.45);
  margin: 4px 0 0;
}
.rs-filters-panel-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.5);
  cursor: pointer;
  padding: 4px;
  transition: color .2s;
}
.rs-filters-panel-close:hover { color: #fff; }

.rs-filters-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.rs-filter-group {
  margin-bottom: 24px;
}
.rs-filter-label {
  display: block;
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.rs-filter-search {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: #fff;
  font-size: .85rem;
  outline: none;
  margin-bottom: 10px;
  transition: border-color .2s;
}
.rs-filter-search:focus {
  border-color: rgba(255,255,255,.3);
}
.rs-filter-search::placeholder {
  color: rgba(255,255,255,.35);
}

.rs-filter-brand-list {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rs-filter-brand-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255,255,255,.7);
  font-size: .85rem;
  cursor: pointer;
  transition: all .15s;
}
.rs-filter-brand-item:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}
.rs-filter-brand-item.active {
  background: rgba(255,255,255,.1);
  color: #fff;
}

.rs-price-range {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rs-range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,.15);
  border-radius: 2px;
  outline: none;
}
.rs-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.rs-price-values {
  display: flex;
  justify-content: space-between;
  font-size: .8rem;
  color: rgba(255,255,255,.5);
  margin-top: 4px;
}

.rs-filter-select {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: #fff;
  font-size: .85rem;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.rs-filter-select option {
  background: #111;
  color: #fff;
}

.rs-filter-reset {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: transparent;
  color: rgba(255,255,255,.7);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  margin-top: 8px;
}
.rs-filter-reset:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}

/* ---- Products Grid (3 columns, repsheet.net) ---- */
.rs-products-section {
  padding: 24px 0 48px;
  min-height: 60vh;
}

.rs-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Product card in grid */
.rs-products-grid .product-card {
  background: transparent;
  border-radius: 16px;
  overflow: hidden;
  border: none;
  box-shadow: none;
  cursor: pointer;
  transition: transform .2s;
  position: relative;
}
.rs-products-grid .product-card:hover {
  transform: translateY(-3px);
}

.rs-products-grid .product-card .product-image-container {
  aspect-ratio: 1 / 1;
  background: #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.rs-products-grid .product-card .product-image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  transition: transform .3s;
}
.rs-products-grid .product-card:hover .product-image-container img {
  transform: scale(1.05);
}

/* Gradient overlay on card */
.rs-products-grid .product-card .product-image-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(0deg, rgba(0,0,0,.7) 0%, transparent 100%);
  pointer-events: none;
  border-radius: 0 0 16px 16px;
}

/* Product info below image */
.rs-products-grid .product-card .product-info {
  padding: .6rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  background: transparent;
}
.rs-products-grid .product-card .product-name {
  font-size: .85rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.rs-products-grid .product-card .product-price {
  font-size: .85rem;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Hide old elements that don't fit new design */
.rs-products-grid .product-card .product-category,
.rs-products-grid .product-card .product-quality,
.rs-products-grid .product-card .product-agent-link,
.rs-products-grid .product-card .qc-link {
  display: none !important;
}

.rs-products-grid .product-card .product-actions {
  width: 100%;
  margin-top: 4px;
}
.rs-products-grid .product-card .product-actions .btn {
  width: 100%;
  padding: 8px;
  font-size: .8rem;
  border-radius: 8px;
  text-align: center;
  display: block;
  font-weight: 600;
}

/* "NEW" badge */
.rs-products-grid .product-card .product-badge-new {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #2563eb;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  z-index: 2;
}

/* Responsive grid */
@media (max-width: 1024px) {
  .rs-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
@media (max-width: 600px) {
  .rs-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .rs-cat-bar {
    padding: 10px 12px;
  }
  .rs-cat-arrow { display: none; }
}

/* Hide old sidebar on products page */
.filters-sidebar,
.products-layout {
  display: contents;
}
.products-grid-wrapper {
  display: contents;
}
/* ============================================
   REPSHEET-STYLE REDESIGN (rs-* namespace)
   ============================================ */

/* ---------- HERO ---------- */
.rs-hero{position:relative;overflow:hidden;padding:6rem 0 4rem;min-height:520px;display:flex;align-items:center}
.rs-hero-bg{position:absolute;inset:0;z-index:0}
.rs-hero-mesh{position:absolute;inset:0;background:
  radial-gradient(ellipse 80% 60% at 50% 40%,rgba(220,38,38,.18),transparent 70%),
  radial-gradient(ellipse 60% 50% at 20% 50%,rgba(168,85,247,.12),transparent 60%),
  radial-gradient(ellipse 50% 40% at 80% 60%,rgba(236,72,153,.10),transparent 55%),
  #000}
.rs-hero-dots{position:absolute;inset:0;opacity:.18;background-image:radial-gradient(circle,rgba(255,255,255,.35) 1px,transparent 1px);background-size:24px 24px}
.rs-hero-inner{position:relative;z-index:1;max-width:800px}

.rs-hero-announcement{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .85rem;border:1px solid rgba(255,255,255,.1);border-radius:999px;font-size:.8rem;color:rgba(255,255,255,.7);margin-bottom:1.5rem;background:rgba(255,255,255,.04);backdrop-filter:blur(6px)}
.rs-hero-announcement svg{opacity:.6}

.rs-hero-title{font-family:var(--font-display),sans-serif;font-size:clamp(3.5rem,9vw,7rem);font-weight:800;letter-spacing:-.03em;line-height:.95;margin-bottom:1.2rem;color:#fff;-webkit-text-fill-color:unset;background:none}
.rs-hero-title-accent{background:linear-gradient(135deg,#dc2626,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.rs-hero-desc{font-size:clamp(.95rem,1.6vw,1.15rem);color:rgba(255,255,255,.6);max-width:620px;line-height:1.7;margin-bottom:2rem}

.rs-hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.5rem}

.rs-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.7rem 1.5rem;border-radius:8px;font-weight:600;font-size:.95rem;transition:all .2s ease;text-decoration:none;border:1.5px solid transparent}
.rs-btn-primary{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}
.rs-btn-primary:hover{background:var(--primary-light);border-color:var(--primary-light);transform:translateY(-1px);box-shadow:0 8px 24px rgba(220,38,38,.25)}

/* Magic Animated Border Button */
.rs-btn-magic {
  position: relative;
  display: inline-flex;
  height: 50px;
  overflow: hidden;
  border-radius: 9999px;
  padding: 1px;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rs-btn-magic:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(226, 203, 255, 0.2);
}
.rs-btn-magic-spin {
  position: absolute;
  top: -500%;
  left: -500%;
  right: -500%;
  bottom: -500%;
  background: conic-gradient(from 90deg at 50% 50%, #E2CBFF 0%, #393BB2 50%, #E2CBFF 100%);
  animation: spinMagic 2.5s linear infinite;
  z-index: 0;
}
.rs-btn-magic-inner {
  position: relative;
  display: inline-flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: #0b0f1a;
  padding: 0 1.5rem;
  font-size: 0.95rem;
  color: #ffffff;
  backdrop-filter: blur(10px);
  z-index: 10;
}
@keyframes spinMagic {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.rs-btn-white{background:#fff;color:#000;border-color:#fff}
.rs-btn-white:hover{background:rgba(255,255,255,.88);transform:translateY(-1px);box-shadow:0 8px 24px rgba(255,255,255,.12)}
.rs-btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.25)}
.rs-btn-outline:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.05);transform:translateY(-1px)}
.rs-btn-outline svg{transition:transform .2s}.rs-btn-outline:hover svg{transform:translateX(3px)}

.rs-hero-agents{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:2.5rem}
.rs-agent-circles{display:flex;gap:-.25rem}
.rs-agent-circle{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:800;color:#fff;border:2px solid rgba(0,0,0,.3);margin-left:-6px;transition:transform .15s}
.rs-agent-circle:first-child{margin-left:0}
.rs-agent-circle:hover{transform:scale(1.15);z-index:1}
.rs-agent-more{background:rgba(255,255,255,.12) !important;color:rgba(255,255,255,.7);font-size:.65rem}
.rs-agent-icons{display:flex;gap:.4rem}
.rs-agent-pill{padding:.28rem .65rem;border-radius:6px;font-size:.72rem;font-weight:600;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.7)}
.rs-agent-label{font-size:.8rem;color:rgba(255,255,255,.4)}

.rs-hero-search{max-width:580px;width:100%}
.rs-hero-search-form{display:flex;align-items:center;gap:.6rem;padding:.75rem 1.2rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:12px;transition:border-color .2s,background .2s}
.rs-hero-search-form:focus-within{border-color:rgba(220,38,38,.35);background:rgba(255,255,255,.06)}
.rs-hero-search-form svg{color:rgba(255,255,255,.35);flex-shrink:0}
.rs-hero-search-form input{background:none;border:none;outline:none;color:#fff;font-size:.92rem;width:100%;font-family:inherit}
.rs-hero-search-form input::placeholder{color:rgba(255,255,255,.35)}

/* ---------- SECTIONS ---------- */
.rs-section{padding:4rem 0}
.rs-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}
.rs-section-title{font-family:var(--font-display),sans-serif;font-size:clamp(1.4rem,3vw,1.8rem);font-weight:700;color:#fff}
.rs-view-more{display:inline-flex;align-items:center;gap:.35rem;color:rgba(255,255,255,.5);font-size:.9rem;font-weight:500;transition:color .2s}
.rs-view-more:hover{color:#fff}
.rs-view-more svg{transition:transform .2s}.rs-view-more:hover svg{transform:translateX(3px)}

/* ---------- PRODUCT GRID ---------- */
.rs-product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.2rem}
.rs-product-skeleton{border-radius:12px;overflow:hidden;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.rs-skel-img{height:220px;background:linear-gradient(110deg,rgba(255,255,255,.04) 40%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 60%);background-size:200% 100%;animation:rs-shimmer 1.5s infinite}
.rs-skel-lines{padding:1rem;display:flex;flex-direction:column;gap:.5rem}
.rs-skel-lines span{height:14px;border-radius:4px;background:rgba(255,255,255,.06)}
.rs-skel-lines .short{width:50%}
@keyframes rs-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- CATEGORY GRID ---------- */
.rs-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.rs-cat-card{padding:1.8rem;border-radius:14px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);transition:all .25s ease;text-decoration:none;color:inherit}
.rs-cat-card:hover{border-color:rgba(220,38,38,.25);background:rgba(255,255,255,.04);transform:translateY(-2px)}
.rs-cat-icon{width:44px;height:44px;border-radius:10px;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;color:rgba(255,255,255,.6)}
.rs-cat-card h3{font-size:1.05rem;font-weight:600;margin-bottom:.4rem;color:#fff}
.rs-cat-card p{font-size:.85rem;color:rgba(255,255,255,.45);line-height:1.5}

/* ---------- TOOLS SECTION ---------- */
.rs-tools-section{background:linear-gradient(180deg,transparent,rgba(220,38,38,.02) 50%,transparent)}
.rs-tools-header{text-align:center;margin-bottom:3rem}
.rs-tools-kicker{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.8rem}
.rs-tools-title{font-family:var(--font-display),sans-serif;font-size:clamp(2rem,5vw,3.2rem);font-weight:800;color:#fff;margin-bottom:.8rem}
.rs-tools-title em{font-style:italic;background:linear-gradient(135deg,#ef4444,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.rs-tools-desc{font-size:1rem;color:rgba(255,255,255,.5);max-width:560px;margin:0 auto}

.rs-tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-bottom:3.5rem}
.rs-tool-card{position:relative;padding:2rem 1.5rem;border-radius:14px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);backdrop-filter:blur(8px);text-decoration:none;color:inherit;transition:all .25s ease;display:flex;flex-direction:column;align-items:center;text-align:center}
.rs-tool-card:hover{border-color:rgba(220,38,38,.2);background:rgba(255,255,255,.04);transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.3)}
.rs-tool-arrow{position:absolute;top:1rem;right:1rem;color:rgba(255,255,255,.2);transition:color .2s}
.rs-tool-card:hover .rs-tool-arrow{color:rgba(255,255,255,.5)}
.rs-tool-icon{width:56px;height:56px;border-radius:14px;background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem;color:rgba(255,255,255,.65)}
.rs-tool-card h3{font-size:1.05rem;font-weight:700;margin-bottom:.5rem;color:#fff}
.rs-tool-card p{font-size:.85rem;color:rgba(255,255,255,.45);line-height:1.5}

/* Why RepsHub */
.rs-why-title{text-align:center;font-size:1.4rem;font-weight:700;color:#fff;margin-bottom:2rem}
.rs-why-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.rs-why-card{padding:2rem;border-radius:14px;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);text-align:center}
.rs-why-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.rs-why-icon-green{background:rgba(34,197,94,.1);color:#22c55e}
.rs-why-icon-blue{background:rgba(59,130,246,.1);color:#3b82f6}
.rs-why-icon-purple{background:rgba(168,85,247,.1);color:#a855f7}
.rs-why-card h4{font-size:1.05rem;font-weight:700;margin-bottom:.4rem;color:#fff}
.rs-why-card p{font-size:.85rem;color:rgba(255,255,255,.45);line-height:1.5}

/* ---------- FAQ ---------- */
.rs-faq-section{background:linear-gradient(180deg,transparent,rgba(255,255,255,.01) 50%,transparent)}
.rs-faq-layout{display:grid;grid-template-columns:1fr 1.3fr;gap:4rem;align-items:start}
.rs-faq-title{font-family:var(--font-display),sans-serif;font-size:clamp(2.2rem,5vw,3.5rem);font-weight:800;line-height:1.05;background:linear-gradient(180deg,#fff 40%,rgba(255,255,255,.35));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.rs-faq-right{display:flex;flex-direction:column;gap:.5rem}
.rs-faq-item{border:1px solid rgba(255,255,255,.07);border-radius:12px;overflow:hidden;transition:border-color .2s}
.rs-faq-item:hover{border-color:rgba(255,255,255,.12)}
.rs-faq-item[open]{border-color:rgba(220,38,38,.15)}
.rs-faq-item summary{padding:1.1rem 1.4rem;font-weight:600;font-size:.95rem;color:rgba(255,255,255,.85);cursor:pointer;display:flex;justify-content:space-between;align-items:center;list-style:none;transition:color .2s}
.rs-faq-item summary::-webkit-details-marker{display:none}
.rs-faq-item summary::after{content:'›';font-size:1.4rem;color:rgba(255,255,255,.3);transition:transform .25s;transform:rotate(90deg)}
.rs-faq-item[open] summary::after{transform:rotate(270deg)}
.rs-faq-item summary:hover{color:#fff}
.rs-faq-answer{padding:0 1.4rem 1.2rem}
.rs-faq-answer p{font-size:.9rem;color:rgba(255,255,255,.5);line-height:1.7}

/* ---------- FOOTER ---------- */
.rs-footer{border-top:1px solid rgba(255,255,255,.06);padding:3.5rem 0 1.5rem;margin-top:2rem;background:linear-gradient(180deg,transparent,rgba(0,0,0,.4))}
.rs-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:3rem;margin-bottom:2.5rem}
.rs-footer-brand{font-size:1.3rem;font-weight:800;color:#fff;display:block;margin-bottom:.6rem}
.rs-footer-bio{font-size:.88rem;color:rgba(255,255,255,.4);line-height:1.6;max-width:300px}
.rs-footer-col h4{font-size:.95rem;font-weight:700;color:#fff;margin-bottom:1rem}
.rs-footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.55rem}
.rs-footer-col ul a{color:rgba(255,255,255,.45);font-size:.88rem;transition:color .2s;text-decoration:none}
.rs-footer-col ul a:hover{color:#fff}
.rs-footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding-top:1.5rem;text-align:center}
.rs-footer-bottom p{font-size:.82rem;color:rgba(255,255,255,.3)}

/* ---------- LIGHT THEME ---------- */
:root[data-theme="light"] .rs-hero-mesh{background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(220,38,38,.06),transparent 70%),radial-gradient(ellipse 60% 50% at 20% 50%,rgba(168,85,247,.04),transparent 60%),#f5f5f5}
:root[data-theme="light"] .rs-hero-dots{opacity:.06;background-image:radial-gradient(circle,rgba(0,0,0,.25) 1px,transparent 1px)}
:root[data-theme="light"] .rs-hero-title{color:#111;-webkit-text-fill-color:#111}
:root[data-theme="light"] .rs-hero-title-accent{-webkit-text-fill-color:transparent}
:root[data-theme="light"] .rs-hero-desc{color:rgba(0,0,0,.55)}
:root[data-theme="light"] .rs-hero-announcement{border-color:rgba(0,0,0,.08);color:rgba(0,0,0,.5);background:rgba(0,0,0,.03)}
:root[data-theme="light"] .rs-btn-primary{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}
:root[data-theme="light"] .rs-btn-white{background:#111;color:#fff;border-color:#111}
:root[data-theme="light"] .rs-btn-white:hover{background:#333}
:root[data-theme="light"] .rs-btn-outline{color:#111;border-color:rgba(0,0,0,.2)}
:root[data-theme="light"] .rs-btn-outline:hover{border-color:rgba(0,0,0,.4);background:rgba(0,0,0,.03)}
:root[data-theme="light"] .rs-agent-pill{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08);color:rgba(0,0,0,.55)}
:root[data-theme="light"] .rs-agent-label{color:rgba(0,0,0,.35)}
:root[data-theme="light"] .rs-hero-search-form{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.1)}
:root[data-theme="light"] .rs-hero-search-form input{color:#111}
:root[data-theme="light"] .rs-hero-search-form input::placeholder{color:rgba(0,0,0,.35)}
:root[data-theme="light"] .rs-hero-search-form svg{color:rgba(0,0,0,.3)}
:root[data-theme="light"] .rs-section-title{color:#111}
:root[data-theme="light"] .rs-view-more{color:rgba(0,0,0,.4)}
:root[data-theme="light"] .rs-view-more:hover{color:#111}
:root[data-theme="light"] .rs-product-skeleton{background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.06)}
:root[data-theme="light"] .rs-skel-img{background:linear-gradient(110deg,rgba(0,0,0,.03) 40%,rgba(0,0,0,.06) 50%,rgba(0,0,0,.03) 60%);background-size:200% 100%}
:root[data-theme="light"] .rs-skel-lines span{background:rgba(0,0,0,.05)}
:root[data-theme="light"] .rs-cat-card{border-color:rgba(0,0,0,.06);background:rgba(0,0,0,.01)}
:root[data-theme="light"] .rs-cat-card:hover{border-color:rgba(220,38,38,.2);background:rgba(0,0,0,.02)}
:root[data-theme="light"] .rs-cat-icon{background:rgba(0,0,0,.04);color:rgba(0,0,0,.5)}
:root[data-theme="light"] .rs-cat-card h3{color:#111}
:root[data-theme="light"] .rs-cat-card p{color:rgba(0,0,0,.45)}
:root[data-theme="light"] .rs-tools-section{background:linear-gradient(180deg,transparent,rgba(220,38,38,.015) 50%,transparent)}
:root[data-theme="light"] .rs-tools-kicker{color:rgba(0,0,0,.4)}
:root[data-theme="light"] .rs-tools-title{color:#111}
:root[data-theme="light"] .rs-tools-desc{color:rgba(0,0,0,.45)}
:root[data-theme="light"] .rs-tool-card{border-color:rgba(0,0,0,.06);background:rgba(0,0,0,.01)}
:root[data-theme="light"] .rs-tool-card:hover{border-color:rgba(220,38,38,.15);background:rgba(0,0,0,.02)}
:root[data-theme="light"] .rs-tool-arrow{color:rgba(0,0,0,.15)}
:root[data-theme="light"] .rs-tool-card:hover .rs-tool-arrow{color:rgba(0,0,0,.35)}
:root[data-theme="light"] .rs-tool-icon{background:rgba(0,0,0,.04);color:rgba(0,0,0,.5)}
:root[data-theme="light"] .rs-tool-card h3{color:#111}
:root[data-theme="light"] .rs-tool-card p{color:rgba(0,0,0,.45)}
:root[data-theme="light"] .rs-why-title{color:#111}
:root[data-theme="light"] .rs-why-card{border-color:rgba(0,0,0,.06);background:rgba(0,0,0,.01)}
:root[data-theme="light"] .rs-why-card h4{color:#111}
:root[data-theme="light"] .rs-why-card p{color:rgba(0,0,0,.45)}
:root[data-theme="light"] .rs-faq-title{background:linear-gradient(180deg,#111 40%,rgba(0,0,0,.35));-webkit-background-clip:text;background-clip:text}
:root[data-theme="light"] .rs-faq-item{border-color:rgba(0,0,0,.07)}
:root[data-theme="light"] .rs-faq-item summary{color:rgba(0,0,0,.75)}
:root[data-theme="light"] .rs-faq-item summary::after{color:rgba(0,0,0,.25)}
:root[data-theme="light"] .rs-faq-item summary:hover{color:#111}
:root[data-theme="light"] .rs-faq-answer p{color:rgba(0,0,0,.5)}
:root[data-theme="light"] .rs-footer{border-top-color:rgba(0,0,0,.06);background:linear-gradient(180deg,transparent,rgba(0,0,0,.02))}
:root[data-theme="light"] .rs-footer-brand{color:#111}
:root[data-theme="light"] .rs-footer-bio{color:rgba(0,0,0,.4)}
:root[data-theme="light"] .rs-footer-col h4{color:#111}
:root[data-theme="light"] .rs-footer-col ul a{color:rgba(0,0,0,.45)}
:root[data-theme="light"] .rs-footer-col ul a:hover{color:#111}
:root[data-theme="light"] .rs-footer-bottom{border-top-color:rgba(0,0,0,.06)}
:root[data-theme="light"] .rs-footer-bottom p{color:rgba(0,0,0,.3)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:768px){
  .rs-hero{padding:3.5rem 0 2.5rem;min-height:auto}
  .rs-hero-title{font-size:clamp(2.8rem,12vw,4.5rem)}
  .rs-section{padding:2.5rem 0}
  .rs-faq-layout{grid-template-columns:1fr;gap:2rem}
  .rs-footer-grid{grid-template-columns:1fr;gap:2rem}
  .rs-tools-grid{grid-template-columns:repeat(2,1fr)}
  .rs-cat-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .rs-tools-grid{grid-template-columns:1fr}
  .rs-cat-grid{grid-template-columns:1fr}
  .rs-hero-actions{flex-direction:column}
  .rs-hero-agents{flex-direction:column;align-items:flex-start}
}
/* ============================================
   LATAMFINDS-STYLE HEADER REWORK
   ============================================ */

/* ============================================
   HEADER – repsheet.net style
   ============================================ */

.header .container {
  max-width: 1480px;
}

.header {
  background: rgba(0,0,0,.65) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
}

:root[data-theme="light"] .header {
  background: rgba(0,0,0,.65) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

.header.scrolled {
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
}

.header-content {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0;
  gap: 0;
}

/* -- Left zone: logo + nav -- */
.header-left {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex: 0 0 auto;
}

.logo a {
  color: #fff !important;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.logo a:hover { color: #fff !important; opacity: .85; }

/* Nav links – compact */
.nav { flex: 0 0 auto; margin-left: 0; }

.nav-list {
  display: flex;
  align-items: center;
  gap: 0;
}
.nav-list > li { display: flex; align-items: center; }

.nav-item,
.nav-link,
.nav-dropdown-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  color: rgba(255,255,255,.7);
  min-height: 36px;
  height: 36px;
  padding: 0 .65rem;
  margin: 0;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, background .15s;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-dropdown:hover > .nav-dropdown-toggle,
.nav-dropdown:focus-within > .nav-dropdown-toggle,
.nav-dropdown.open > .nav-dropdown-toggle {
  color: #fff;
  background: rgba(255,255,255,.08);
}

.nav-link.active,
.nav-dropdown.active > .nav-dropdown-toggle,
.nav-dropdown-toggle.active {
  color: #fff;
  background: rgba(255,255,255,.1);
}

.nav-dropdown-caret {
  width: 12px;
  height: 12px;
  opacity: .5;
  flex: 0 0 12px;
  transition: transform .2s, opacity .2s;
}

.nav-dropdown-menu {
  top: calc(100% + .5rem);
  left: 0;
  min-width: 210px;
  padding: .35rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(20,20,24,.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
  transform: translateY(4px);
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  transform: translateY(0);
}

.nav-dropdown-link {
  min-height: 36px;
  padding: .6rem .75rem;
  border-radius: 8px;
  color: rgba(255,255,255,.7);
  font-size: .88rem;
}

.nav-dropdown-link:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}

/* -- Center zone: Search bar -- */
.header-search-form {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
  margin: 0 1.2rem;
}

.header-search-field {
  width: min(100%, 420px);
  min-height: 36px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .5rem;
  padding: 0 .75rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.5);
  transition: border-color .15s, background .15s;
  cursor: text;
}

.header-search-field:hover {
  background: rgba(255,255,255,.08);
}

.header-search-field:focus-within {
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
}

.header-search-icon {
  width: 16px;
  height: 16px;
  color: rgba(255,255,255,.4);
  flex-shrink: 0;
}

.header-search-input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: .88rem;
  line-height: 1;
}

.header-search-input::placeholder {
  color: rgba(255,255,255,.4);
}

/* ⌘K badge */
.header-search-kbd {
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,.35);
  border: 1px solid rgba(255,255,255,.15);
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

/* -- Right zone: Actions -- */
.header-actions {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 0 0 auto;
}

.config-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  background: transparent;
  color: rgba(255,255,255,.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}

.config-toggle:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
}

.btn-register {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: .5rem 1rem;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: background .15s;
  box-shadow: none;
}

.btn-register:hover {
  background: rgba(255,255,255,.18);
}

/* Theme toggle hidden — we keep dark mode only for this layout */
.theme-toggle {
  display: none !important;
}

:root[data-theme="dark"] .header {
  background: rgba(5,8,15,0.86);
  border-bottom-color: rgba(255,255,255,0.06);
}

:root[data-theme="dark"] .logo a,
:root[data-theme="dark"] .nav-item,
:root[data-theme="dark"] .nav-link,
:root[data-theme="dark"] .nav-dropdown-toggle,
:root[data-theme="dark"] .nav-dropdown-link,
:root[data-theme="dark"] .header-search-input {
  color: rgba(255,255,255,0.86);
}

:root[data-theme="dark"] .header-search-field {
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  box-shadow: none;
  color: rgba(255,255,255,0.42);
}

:root[data-theme="dark"] .header-search-input::placeholder {
  color: rgba(255,255,255,0.42);
}

:root[data-theme="dark"] .nav-link:hover,
:root[data-theme="dark"] .nav-link:focus-visible,
:root[data-theme="dark"] .nav-dropdown:hover > .nav-dropdown-toggle,
:root[data-theme="dark"] .nav-dropdown:focus-within > .nav-dropdown-toggle,
:root[data-theme="dark"] .nav-dropdown.open > .nav-dropdown-toggle,
:root[data-theme="dark"] .nav-dropdown-link:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}

:root[data-theme="dark"] .nav-dropdown-menu {
  border-color: rgba(255,255,255,0.08);
  background: rgba(11,15,26,0.98);
  box-shadow: 0 24px 50px rgba(0,0,0,0.35);
}

:root[data-theme="dark"] .theme-toggle,
:root[data-theme="dark"] .config-toggle {
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.72);
  box-shadow: none;
}

@media (max-width: 1280px) {
  .header-search-form {
    flex-basis: 420px;
    margin: 0 0.75rem;
  }

  .nav-link,
  .nav-dropdown-toggle {
    padding: 0.5rem 0.62rem;
  }
}

@media (max-width: 980px) {
  .header-search-form {
    display: none;
  }

  .nav {
    margin-left: auto;
  }
}

@media (max-width: 767px) {
  .header {
    background: rgba(255,255,255,0.96);
  }

  .header-content {
    min-height: 64px;
    padding: 0.45rem 0;
  }

  .logo a {
    font-size: 1rem;
  }

  .nav-list {
    background: rgba(255,255,255,0.98);
    border-left: 1px solid rgba(15,23,42,0.08);
    box-shadow: -16px 0 34px rgba(15,23,42,0.12);
  }

  .nav-link,
  .nav-dropdown-toggle {
    justify-content: space-between;
    font-size: 15px;
  }

  .nav-dropdown-toggle span {
    font: inherit;
  }

  .nav-dropdown-menu {
    left: 0;
    min-width: 0;
    transform: none;
    background: rgba(15,23,42,0.04);
    box-shadow: none;
  }

  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown.open .nav-dropdown-menu {
    transform: none;
  }

  .theme-toggle,
  .config-toggle {
    width: 36px;
    height: 36px;
  }

  .btn-register {
    min-height: 36px;
    padding: 0.62rem 0.84rem;
  }

  :root[data-theme="dark"] .header {
    background: rgba(5,8,15,0.92);
  }

  :root[data-theme="dark"] .nav-list {
    background: rgba(11,15,26,0.98);
    border-left-color: rgba(255,255,255,0.08);
    box-shadow: -16px 0 34px rgba(0,0,0,0.32);
  }

  :root[data-theme="dark"] .nav-dropdown-menu {
    background: rgba(255,255,255,0.04);
  }
}

/* ============================================
   HOME V2 REBUILD
   ============================================ */

main.home-discovery {
  background:
    radial-gradient(circle at top left, rgba(220,38,38,0.06), transparent 28%),
    linear-gradient(180deg, #f8f9fb 0%, #ffffff 100%);
  padding: 0 0 64px;
}

main.home-discovery > .home-hero,
main.home-discovery > .home-categories,
main.home-discovery > .home-featured-intro,
main.home-discovery > .hero-infiner,
main.home-discovery > .featured-products-modern,
main.home-discovery > .home-guides,
main.home-discovery > .home-route,
main.home-discovery > .home-community-cta {
  display: none !important;
}

.home-discovery .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.home-v2-section {
  padding-top: 48px;
}

.home-v2-hero-section {
  padding-top: 24px;
}

.home-v2-hero-card,
.home-v2-entry-card,
.home-v2-category-card,
.home-v2-step-card,
.home-v2-tool-card,
.home-v2-value-card,
.home-v2-seo-card,
.home-v2-cta-card,
.home-v2-loading-card,
.home-featured-card {
  border-radius: 12px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: none;
}

.home-v2-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(220,38,38,0.08);
  color: var(--primary-color);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-v2-title,
.home-v2-section-title,
.home-v2-entry-card h2,
.home-v2-category-card h3,
.home-v2-step-card h3,
.home-v2-tool-card h3,
.home-v2-value-card h3,
.home-featured-name {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0;
}

.home-v2-title {
  max-width: 14ch;
  margin: 16px 0 12px;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 0.96;
}

.home-v2-subtitle,
.home-v2-entry-card p,
.home-v2-category-card p,
.home-v2-step-card p,
.home-v2-tool-card p,
.home-v2-value-card p,
.home-v2-section-copy,
.home-featured-meta,
.home-v2-loading-card span {
  color: rgba(255,255,255,.5);
  line-height: 1.6;
}

.home-v2-subtitle {
  font-size: 1rem;
  margin-bottom: 24px;
}

.home-v2-search {
  margin-bottom: 24px;
}

.home-v2-search-shell {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.08);
  background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

.home-v2-search-icon {
  color: #666;
}

.home-v2-search-input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: #333;
  font-size: 1rem;
}

.home-v2-search-input::placeholder {
  color: #888;
}

.home-v2-hero-actions,
.home-v2-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.home-v2-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  font-weight: 700;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.home-v2-button-primary {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  box-shadow: 0 12px 24px rgba(220,38,38,0.18);
}

.home-v2-button-secondary {
  background: #fff;
  color: #333;
  border: 1px solid rgba(15,23,42,0.08);
}

.home-v2-button:hover,
.home-v2-entry-card:hover,
.home-v2-category-card:hover,
.home-v2-step-card:hover,
.home-v2-tool-card:hover,
.home-v2-value-card:hover {
  transform: translateY(-2px);
}

.home-v2-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.home-v2-section-title {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.02;
}

.home-v2-inline-link {
  color: #333;
  font-weight: 700;
}

.home-v2-entry-grid,
.home-v2-tools-grid,
.home-v2-value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.home-v2-entry-card,
.home-v2-tool-card,
.home-v2-value-card {
  min-height: 190px;
}

.home-v2-icon-wrap {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(220,38,38,0.08);
  color: var(--primary-color);
  margin-bottom: 16px;
}

.home-v2-entry-card h2,
.home-v2-tool-card h3,
.home-v2-value-card h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.home-v2-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.home-v2-loading-card {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-v2-loading-skeleton {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 16px;
  padding: 20px;
}

.home-v2-skeleton-media,
.home-v2-skeleton-line {
  position: relative;
  overflow: hidden;
  background: #e5e7eb;
}

.home-v2-skeleton-media::after,
.home-v2-skeleton-line::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.72), transparent);
  animation: homeFeaturedSkeletonShimmer 1.35s ease-in-out infinite;
}

.home-v2-skeleton-media {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
}

.home-v2-skeleton-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-v2-skeleton-line {
  height: 14px;
  border-radius: 999px;
}

.home-v2-skeleton-line-sm {
  width: 32%;
}

.home-v2-skeleton-line-md {
  width: 48%;
}

.home-v2-skeleton-line-btn {
  width: 40%;
  height: 36px;
  margin-top: 8px;
}

@keyframes homeFeaturedSkeletonShimmer {
  100% {
    transform: translateX(100%);
  }
}

.home-v2-product-status {
  grid-column: 1 / -1;
  min-height: 56px;
  display: flex;
  align-items: center;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px dashed rgba(15,23,42,0.12);
  background: rgba(15,23,42,0.03);
  color: #4b5563;
  font-size: 0.95rem;
  line-height: 1.55;
}

.home-v2-product-status.is-empty {
  border-style: solid;
}

.home-v2-product-status.is-error {
  border-style: solid;
  border-color: rgba(220,38,38,0.16);
  background: rgba(254,242,242,0.9);
  color: #991b1b;
}

/* ---- REPSHEET.NET-STYLE PRODUCT CARDS ---- */

/* Horizontal scroll container */
.rs-product-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) transparent;
}
.rs-product-scroll::-webkit-scrollbar { height: 4px; }
.rs-product-scroll::-webkit-scrollbar-track { background: transparent; }
.rs-product-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

.home-featured-card {
  flex: 0 0 260px;
  scroll-snap-align: start;
  position: relative;
  cursor: pointer;
  transition: transform .2s;
}
.home-featured-card:hover { transform: translateY(-3px); }

.home-featured-media {
  position: relative;
  width: 100%;
  height: 260px;
  border-radius: 12px;
  overflow: hidden;
  background: #e5e7eb;
}

.home-featured-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  transition: transform .3s;
}
.home-featured-card:hover .home-featured-media img {
  transform: scale(1.05);
}

/* Name + price BELOW the image (repsheet.net style) */
.home-featured-overlay {
  padding: .55rem 0 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.home-featured-name {
  font-size: .85rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.home-featured-price {
  font-size: .85rem;
  font-weight: 700;
  color: rgba(255,255,255,.7);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Skeleton in scroll */
.rs-product-scroll .rs-product-skeleton {
  flex: 0 0 260px;
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  overflow: hidden;
}
.rs-product-scroll .rs-skel-img {
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.04) 75%);
  background-size: 200% 200%;
  animation: skel-shimmer 1.5s ease infinite;
}
@keyframes skel-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.home-v2-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.home-v2-category-card h3,
.home-v2-step-card h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.home-v2-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.home-v2-step-number {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(220,38,38,0.1);
  color: var(--primary-color);
  font-weight: 800;
  margin-bottom: 16px;
}

.home-v2-cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}

.home-v2-seo-section {
  padding-top: 28px;
}

.home-v2-seo-card {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 24px;
  align-items: end;
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(249,250,251,0.95));
}

.home-v2-seo-card .home-v2-section-copy {
  margin-top: 0;
  max-width: none;
}

.home-v2-section-copy {
  margin-top: 12px;
  max-width: 600px;
}

:root[data-theme="dark"] main.home-discovery {
  background:
    radial-gradient(circle at top left, rgba(220,38,38,0.14), transparent 28%),
    linear-gradient(180deg, #05080f 0%, #0b0f1a 100%);
}

:root[data-theme="dark"] .home-v2-hero-card,
:root[data-theme="dark"] .home-v2-entry-card,
:root[data-theme="dark"] .home-v2-category-card,
:root[data-theme="dark"] .home-v2-step-card,
:root[data-theme="dark"] .home-v2-tool-card,
:root[data-theme="dark"] .home-v2-value-card,
:root[data-theme="dark"] .home-v2-seo-card,
:root[data-theme="dark"] .home-v2-cta-card,
:root[data-theme="dark"] .home-v2-loading-card,
:root[data-theme="dark"] .home-featured-card,
:root[data-theme="dark"] .home-v2-search-shell {
  background: rgba(11,15,26,0.94);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 18px 36px rgba(0,0,0,0.25);
}

:root[data-theme="dark"] .home-v2-title,
:root[data-theme="dark"] .home-v2-section-title,
:root[data-theme="dark"] .home-v2-entry-card h2,
:root[data-theme="dark"] .home-v2-category-card h3,
:root[data-theme="dark"] .home-v2-step-card h3,
:root[data-theme="dark"] .home-v2-tool-card h3,
:root[data-theme="dark"] .home-v2-value-card h3,
:root[data-theme="dark"] .home-featured-name,
:root[data-theme="dark"] .home-featured-price {
  color: #fff;
}

:root[data-theme="dark"] .home-v2-subtitle,
:root[data-theme="dark"] .home-v2-entry-card p,
:root[data-theme="dark"] .home-v2-category-card p,
:root[data-theme="dark"] .home-v2-step-card p,
:root[data-theme="dark"] .home-v2-tool-card p,
:root[data-theme="dark"] .home-v2-value-card p,
:root[data-theme="dark"] .home-v2-section-copy,
:root[data-theme="dark"] .home-featured-meta,
:root[data-theme="dark"] .home-v2-loading-card span,
:root[data-theme="dark"] .home-v2-search-input,
:root[data-theme="dark"] .home-v2-search-input::placeholder,
:root[data-theme="dark"] .home-v2-inline-link {
  color: rgba(255,255,255,0.72);
}

:root[data-theme="dark"] .home-v2-button-secondary {
  background: rgba(255,255,255,0.04);
  color: #fff;
  border-color: rgba(255,255,255,0.08);
}

:root[data-theme="dark"] .home-v2-product-status {
  border-color: rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.72);
}

:root[data-theme="dark"] .home-v2-skeleton-media,
:root[data-theme="dark"] .home-v2-skeleton-line {
  background: rgba(255,255,255,0.08);
}

:root[data-theme="dark"] .home-v2-skeleton-media::after,
:root[data-theme="dark"] .home-v2-skeleton-line::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
}

:root[data-theme="dark"] .home-v2-product-status.is-error {
  border-color: rgba(248,113,113,0.24);
  background: rgba(127,29,29,0.24);
  color: #fecaca;
}

:root[data-theme="dark"] .home-v2-seo-card {
  background: linear-gradient(135deg, rgba(11,15,26,0.96), rgba(17,24,39,0.9));
}

:root[data-theme="dark"] .home-featured-media {
  background: rgba(255,255,255,0.04);
}

:root[data-theme="dark"] .home-featured-link {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

@media (max-width: 900px) {
  .home-v2-entry-grid,
  .home-v2-tools-grid,
  .home-v2-value-grid,
  .home-v2-category-grid,
  .home-v2-steps-grid,
  .home-v2-cta-card,
  .home-v2-seo-card {
    grid-template-columns: 1fr;
  }

  .home-v2-section-head {
    flex-direction: column;
    align-items: start;
  }
}

@media (max-width: 767px) {
  .home-discovery .container {
    padding: 0 16px;
  }

  .home-v2-section {
    padding-top: 32px;
  }

  .home-v2-title {
    font-size: clamp(2rem, 12vw, 3rem);
  }

  .home-v2-search-shell {
    min-height: 54px;
    padding: 0 16px;
  }

  .home-v2-hero-actions,
  .home-v2-cta-actions {
    flex-direction: column;
  }

  .home-v2-button,
  .home-featured-link {
    width: 100%;
  }
}

/* Final navbar consistency override */
.nav-list {
  align-items: center;
}

.nav-link,
.nav-dropdown-toggle {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  height: 40px;
  min-height: 40px;
}

.nav-dropdown-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  box-shadow: none;
  font: inherit;
}

.nav-dropdown-toggle span {
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: none;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-dropdown:hover > .nav-dropdown-toggle,
.nav-dropdown:focus-within > .nav-dropdown-toggle,
.nav-dropdown.open > .nav-dropdown-toggle,
.nav-link.active,
.nav-dropdown.active > .nav-dropdown-toggle,
.nav-dropdown-toggle.active {
  font-weight: 500;
}

.nav-dropdown-menu {
  top: calc(100% + 8px);
  left: 0;
  transform: translateY(4px);
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  transform: translateY(0);
}

/* ============================================
   HOME DISCOVERY EXPERIENCE
   ============================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero-infiner {
  display: none;
}

.home-discovery {
  position: relative;
  padding-bottom: 1.25rem;
}

.home-discovery .container {
  max-width: 1280px;
}

.home-hero {
  position: relative;
  padding: 0.8rem 0 0.85rem;
  overflow: hidden;
}

.home-hero-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.home-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(18px);
  opacity: 0.7;
}

.home-orb-primary {
  width: 22rem;
  height: 22rem;
  background: radial-gradient(circle, rgba(220,38,38,0.28), rgba(220,38,38,0));
  top: -5rem;
  left: -7rem;
}

.home-orb-secondary {
  width: 24rem;
  height: 24rem;
  background: radial-gradient(circle, rgba(56,189,248,0.14), rgba(56,189,248,0));
  right: -8rem;
  top: 5rem;
}

.home-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85), transparent 92%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.85), transparent 92%);
  opacity: 0.45;
}

.home-hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, 0.86fr);
  gap: 0.85rem;
  align-items: stretch;
}

.home-hero-copy,
.home-hero-aside {
  border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)),
    rgba(7,10,18,0.88);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  backdrop-filter: blur(14px);
}

.home-hero-copy {
  border-radius: 2rem;
  padding: 1.2rem;
}

.home-eyebrow,
.home-section-kicker,
.hero-panel-kicker,
.hero-mini-label,
.home-category-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  margin-bottom: 0.9rem;
}

.home-title,
.home-section-title,
.hero-panel strong,
.hero-mini-card strong,
.home-category-card h3,
.home-guide-card h3 {
  font-family: var(--font-display);
}

.home-title {
  max-width: 12ch;
  font-size: clamp(2.18rem, 4.2vw, 3.85rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
  margin-bottom: 0.65rem;
}

.home-subtitle,
.home-section-text,
.hero-panel p,
.hero-mini-card,
.home-category-card p,
.home-guide-card p,
.home-route-card p {
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
}

.home-subtitle {
  max-width: 41rem;
  font-size: 0.92rem;
}

.home-search-form {
  margin-top: 1rem;
}

.home-search-shell {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.72rem;
  padding: 0.48rem 0.55rem 0.48rem 0.72rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.home-search-icon {
  color: rgba(255,255,255,0.5);
}

.home-search-input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.9rem;
  outline: none;
}

.home-search-input::placeholder {
  color: rgba(255,255,255,0.42);
}

.home-search-button,
.home-primary-button,
.home-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 999px;
  font-weight: 700;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.home-search-button,
.home-primary-button {
  padding: 0.64rem 0.98rem;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  border: 1px solid transparent;
}

.home-search-button:hover,
.home-primary-button:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #f87171, #dc2626);
}

.home-quick-links,
.home-stats,
.hero-panel-grid,
.home-community-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.home-quick-links {
  margin-top: 0.7rem;
}

.home-chip {
  padding: 0.48rem 0.72rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.76);
  font-size: 0.81rem;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.home-chip:hover,
.home-inline-link:hover,
.home-guide-link:hover {
  transform: translateY(-1px);
  color: #fff;
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
}

.home-stats {
  margin-top: 0.8rem;
}

.home-stat-card {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 132px;
  padding: 0.62rem 0.72rem;
  border-radius: 0.85rem;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.06);
}

.home-stat-value {
  font-family: var(--font-display);
  font-size: 0.93rem;
  color: #fff;
}

.home-stat-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.62);
}

.home-hero-aside {
  border-radius: 2rem;
  padding: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.hero-panel,
.hero-mini-card,
.home-category-card,
.home-guide-card,
.home-route-card,
.home-community-card {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  border-radius: 1.25rem;
}

.hero-panel {
  padding: 0.95rem;
}

.hero-panel strong {
  display: block;
  font-size: 1.08rem;
  line-height: 1.12;
  margin-bottom: 0.38rem;
}

.hero-panel-arrow,
.home-inline-link,
.home-guide-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  font-weight: 700;
  color: #fca5a5;
}

.hero-panel-primary {
  background:
    linear-gradient(135deg, rgba(220,38,38,0.18), rgba(255,255,255,0.02)),
    rgba(255,255,255,0.03);
}

.hero-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.hero-mini-card {
  padding: 0.8rem;
  min-height: 102px;
}

.hero-mini-card strong {
  display: block;
  font-size: 0.88rem;
  line-height: 1.3;
}

.home-categories,
.home-guides,
.home-route,
.home-community-cta,
.home-featured-intro {
  padding: 0.5rem 0 0;
}

.home-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
  gap: 0.85rem;
  align-items: end;
  margin-bottom: 0.8rem;
}

.home-section-heading-inline {
  align-items: center;
}

.home-section-title {
  font-size: clamp(1.42rem, 2.2vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.home-category-grid,
.home-guide-grid,
.home-route-cards {
  display: grid;
  gap: 0.8rem;
}

.home-category-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-category-card {
  padding: 0.88rem;
  min-height: 150px;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.home-category-card:hover,
.home-guide-card:hover,
.home-route-card:hover,
.hero-panel:hover,
.hero-mini-card:hover,
.home-community-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
}

.home-category-card h3,
.home-guide-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.42rem;
}

.home-discovery .featured-products-modern {
  padding-top: 0.25rem !important;
}

.home-discovery .featured-products-modern .carousel-wrapper {
  border-radius: 1.1rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03) !important;
  padding: 0.65rem 0;
}

.home-discovery .featured-products-modern .carousel-item {
  min-width: 182px !important;
  max-width: 182px !important;
  border-radius: 0.9rem;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(8,11,19,0.9) !important;
}

.home-discovery .featured-products-modern .carousel-product-name {
  text-align: left;
  padding: 0.58rem 0.68rem !important;
  font-size: 0.8rem !important;
}

.home-guide-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-guide-card {
  padding: 0.9rem;
}

.home-guide-step {
  display: inline-flex;
  margin-bottom: 0.8rem;
  font-family: var(--font-display);
  color: rgba(255,255,255,0.45);
}

.home-route-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 0.7rem;
  align-items: start;
}

.home-route-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-route-card {
  padding: 0.85rem;
  min-height: 132px;
}

.home-route-card strong {
  display: block;
  margin-bottom: 0.38rem;
  font-family: var(--font-display);
  font-size: 0.92rem;
}

.home-community-card {
  padding: 0.95rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(220,38,38,0.14), rgba(56,189,248,0.03)),
    rgba(255,255,255,0.03);
}

.home-secondary-button {
  padding: 0.62rem 0.95rem;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #fff;
}

.home-secondary-button:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.08);
}

/* ============================================
   RESOURCE PAGES
   ============================================ */
.resource-page {
  position: relative;
  padding: 0.75rem 0 2.5rem;
}

.resource-page::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 24rem;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 10%, rgba(220,38,38,0.18), transparent 34%),
    radial-gradient(circle at 92% 18%, rgba(56,189,248,0.14), transparent 32%);
  opacity: 0.9;
}

.resource-page .container {
  position: relative;
  z-index: 1;
  max-width: 1220px;
}

.resource-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 0.85rem;
  align-items: stretch;
  margin-bottom: 0.85rem;
}

.resource-panel,
.resource-card,
.resource-step-card,
.resource-cta-card {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.25rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.018)),
    rgba(7,10,18,0.88);
  box-shadow: 0 18px 45px rgba(0,0,0,0.28);
}

.resource-panel {
  padding: 1.1rem;
}

.resource-panel-primary {
  padding: 1.2rem;
}

.resource-eyebrow,
.resource-mini-kicker,
.resource-step-number,
.resource-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}

.resource-title,
.resource-card h2,
.resource-card h3,
.resource-panel h2,
.resource-panel h3,
.resource-step-card h3,
.resource-cta-card h2 {
  font-family: var(--font-display);
}

.resource-title {
  max-width: 11ch;
  margin: 0.6rem 0 0.75rem;
  font-size: clamp(2.05rem, 4vw, 3.55rem);
  line-height: 0.97;
  letter-spacing: -0.05em;
}

.resource-subtitle,
.resource-card p,
.resource-panel p,
.resource-step-card p,
.resource-cta-card p,
.resource-compact-list li {
  color: rgba(255,255,255,0.72);
  line-height: 1.68;
}

.resource-subtitle {
  max-width: 46rem;
  font-size: 0.95rem;
}

.resource-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1rem;
}

.resource-badge {
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}

.resource-hero-side {
  display: grid;
  gap: 0.75rem;
}

.resource-mini-grid,
.resource-grid,
.resource-step-grid,
.resource-dual-grid {
  display: grid;
  gap: 0.8rem;
}

.resource-mini-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.resource-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0.85rem;
}

.resource-dual-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 0.85rem;
}

.resource-card,
.resource-step-card,
.resource-cta-card {
  padding: 1rem;
}

.resource-card h2,
.resource-card h3,
.resource-panel h2,
.resource-panel h3,
.resource-step-card h3 {
  font-size: 1.02rem;
  line-height: 1.2;
  margin: 0.45rem 0;
}

.resource-compact-list {
  margin: 0.7rem 0 0;
  padding-left: 1rem;
}

.resource-compact-list li + li {
  margin-top: 0.45rem;
}

.resource-note {
  margin-top: 0.75rem;
  padding: 0.75rem 0.85rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.72);
  font-size: 0.88rem;
}

.resource-highlight {
  color: #fff;
  font-weight: 700;
}

.batch-table-card {
  padding: 1rem;
  margin-bottom: 0.85rem;
}

.batch-table-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.72fr);
  gap: 0.8rem;
  align-items: end;
  margin-bottom: 0.9rem;
}

.batch-table-header h2 {
  font-size: 1.1rem;
  margin: 0.45rem 0 0;
}

.batch-table-wrap {
  overflow-x: auto;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
}

.batch-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
}

.batch-table th,
.batch-table td {
  padding: 0.92rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-align: left;
}

.batch-table thead th {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.58);
  background: rgba(255,255,255,0.025);
}

.batch-table tbody tr:last-child td {
  border-bottom: 0;
}

.batch-table tbody tr:hover {
  background: rgba(255,255,255,0.03);
}

.batch-table td {
  color: rgba(255,255,255,0.78);
  font-size: 0.95rem;
}

.batch-table td:first-child {
  font-weight: 600;
  color: #fff;
}

.batch-value {
  font-weight: 700;
  color: #fb923c !important;
}

.resource-step-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 0.85rem;
}

.resource-step-card {
  min-height: 186px;
}

.resource-step-number {
  margin-bottom: 0.75rem;
}

.resource-cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(220,38,38,0.16), rgba(56,189,248,0.04)),
    rgba(255,255,255,0.03);
}

.resource-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.resource-button,
.resource-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0.62rem 0.98rem;
  border-radius: 999px;
  font-weight: 700;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.resource-button {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  border: 1px solid transparent;
}

.resource-button-secondary {
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #fff;
}

.resource-button:hover,
.resource-button-secondary:hover {
  transform: translateY(-1px);
}

.resource-button-secondary:hover {
  background: rgba(255,255,255,0.08);
}

:root[data-theme="light"] .home-grid {
  background-image:
    linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
}

:root[data-theme="light"] .home-hero-copy,
:root[data-theme="light"] .home-hero-aside,
:root[data-theme="light"] .hero-panel,
:root[data-theme="light"] .hero-mini-card,
:root[data-theme="light"] .home-category-card,
:root[data-theme="light"] .home-guide-card,
:root[data-theme="light"] .home-route-card,
:root[data-theme="light"] .home-community-card,
:root[data-theme="light"] .home-discovery .featured-products-modern .carousel-wrapper,
:root[data-theme="light"] .home-discovery .featured-products-modern .carousel-item {
  background: rgba(255,255,255,0.88) !important;
  border-color: rgba(15,23,42,0.08);
  box-shadow: 0 15px 35px rgba(15,23,42,0.08);
}

:root[data-theme="light"] .home-title,
:root[data-theme="light"] .home-section-title,
:root[data-theme="light"] .hero-panel strong,
:root[data-theme="light"] .hero-mini-card strong,
:root[data-theme="light"] .home-category-card h3,
:root[data-theme="light"] .home-guide-card h3,
:root[data-theme="light"] .home-route-card strong,
:root[data-theme="light"] .home-stat-value {
  color: #101828;
}

:root[data-theme="light"] .home-subtitle,
:root[data-theme="light"] .home-section-text,
:root[data-theme="light"] .hero-panel p,
:root[data-theme="light"] .hero-mini-card,
:root[data-theme="light"] .home-category-card p,
:root[data-theme="light"] .home-guide-card p,
:root[data-theme="light"] .home-route-card p,
:root[data-theme="light"] .home-stat-label,
:root[data-theme="light"] .home-chip,
:root[data-theme="light"] .home-eyebrow,
:root[data-theme="light"] .home-section-kicker,
:root[data-theme="light"] .hero-panel-kicker,
:root[data-theme="light"] .hero-mini-label,
:root[data-theme="light"] .home-category-eyebrow {
  color: rgba(16,24,40,0.68);
}

:root[data-theme="light"] .home-search-shell,
:root[data-theme="light"] .home-chip,
:root[data-theme="light"] .home-stat-card,
:root[data-theme="light"] .home-secondary-button {
  background: rgba(15,23,42,0.04);
  border-color: rgba(15,23,42,0.08);
}

:root[data-theme="light"] .home-search-input::placeholder,
:root[data-theme="light"] .home-search-icon {
  color: rgba(16,24,40,0.42);
}

:root[data-theme="light"] .home-search-input,
:root[data-theme="light"] .home-secondary-button {
  color: #101828;
}

:root[data-theme="light"] .resource-panel,
:root[data-theme="light"] .resource-card,
:root[data-theme="light"] .resource-step-card,
:root[data-theme="light"] .resource-cta-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,252,0.96));
  border-color: rgba(15,23,42,0.1);
  box-shadow:
    0 18px 38px rgba(15,23,42,0.07),
    0 1px 0 rgba(255,255,255,0.75) inset;
}

:root[data-theme="light"] .resource-title,
:root[data-theme="light"] .resource-card h2,
:root[data-theme="light"] .resource-card h3,
:root[data-theme="light"] .resource-panel h2,
:root[data-theme="light"] .resource-panel h3,
:root[data-theme="light"] .resource-step-card h3,
:root[data-theme="light"] .resource-cta-card h2,
:root[data-theme="light"] .resource-highlight {
  color: #101828;
}

:root[data-theme="light"] .resource-subtitle,
:root[data-theme="light"] .resource-card p,
:root[data-theme="light"] .resource-panel p,
:root[data-theme="light"] .resource-step-card p,
:root[data-theme="light"] .resource-cta-card p,
:root[data-theme="light"] .resource-compact-list li,
:root[data-theme="light"] .resource-eyebrow,
:root[data-theme="light"] .resource-mini-kicker,
:root[data-theme="light"] .resource-step-number,
:root[data-theme="light"] .resource-badge,
:root[data-theme="light"] .resource-note {
  color: rgba(16,24,40,0.7);
}

:root[data-theme="light"] .resource-badge,
:root[data-theme="light"] .resource-note,
:root[data-theme="light"] .resource-button-secondary {
  background: rgba(15,23,42,0.04);
  border-color: rgba(15,23,42,0.08);
}

:root[data-theme="light"] .batch-table-wrap {
  background: rgba(255,255,255,0.88);
  border-color: rgba(15,23,42,0.08);
}

:root[data-theme="light"] .batch-table th,
:root[data-theme="light"] .batch-table td {
  border-bottom-color: rgba(15,23,42,0.08);
}

:root[data-theme="light"] .batch-table thead th {
  color: rgba(16,24,40,0.58);
  background: rgba(15,23,42,0.025);
}

:root[data-theme="light"] .batch-table tbody tr:hover {
  background: rgba(15,23,42,0.025);
}

:root[data-theme="light"] .batch-table td {
  color: rgba(16,24,40,0.78);
}

:root[data-theme="light"] .batch-table td:first-child {
  color: #101828;
}

:root[data-theme="light"] .resource-page {
  background:
    linear-gradient(180deg, #f7f7f8 0%, #ffffff 42%, #f7f7f8 100%);
}

:root[data-theme="light"] .resource-page::before {
  opacity: 0.55;
}

:root[data-theme="light"] .resource-button-secondary {
  color: #101828;
}

/* ============================================
   GUIDE + CALCULATOR POLISH
   ============================================ */
.page-header {
  padding: 0.8rem 0 0.65rem;
}

.page-header .container {
  max-width: 1220px;
  padding: 1.15rem 1.2rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.35rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.018)),
    rgba(7,10,18,0.88);
  box-shadow: 0 18px 45px rgba(0,0,0,0.28);
}

.page-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin-bottom: 0.55rem;
}

.como-comprar-section {
  padding: 0.8rem 0 2rem;
}

.como-comprar-content {
  max-width: 1220px;
}

.steps-grid,
.steps-column {
  gap: 0.8rem;
}

.step-card {
  border-radius: 1.25rem;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.018)),
    rgba(7,10,18,0.88);
  box-shadow: 0 18px 45px rgba(0,0,0,0.24);
}

.step-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.14);
  box-shadow: 0 22px 48px rgba(0,0,0,0.3);
}

.step-header {
  padding: 1rem 1rem 0.95rem;
  gap: 0.9rem;
}

.step-number {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 0.9rem;
  font-size: 0.86rem;
}

.step-title {
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.18;
}

.step-content {
  padding: 0 1rem;
}

.step-content.expanded {
  padding: 0 1rem 1rem;
}

.step-content p,
.step-list li,
.order-state-desc {
  color: rgba(255,255,255,0.74);
}

.step-subtitle,
.order-state-name {
  font-family: var(--font-display);
}

.step-subsection {
  margin-top: 1rem;
}

.order-state-item {
  border-radius: 1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}

.tax-calculator-section {
  background: transparent;
  padding: 0.8rem 0 2rem;
}

.calculator-wrapper {
  max-width: 1220px;
}

.calculator-badge {
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.72);
}

.calculator-main-title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  letter-spacing: -0.05em;
  margin-bottom: 0.45rem;
}

.calculator-main-subtitle {
  margin-bottom: 1rem;
}

.exchange-rates-card,
.input-step-card,
.results-card {
  border-radius: 1.25rem;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.018)),
    rgba(7,10,18,0.88);
  box-shadow: 0 18px 45px rgba(0,0,0,0.24);
}

.exchange-rates-card {
  padding: 1rem 1.1rem;
}

.calculator-main-container,
.calculator-inputs-column {
  gap: 0.8rem;
}

.input-step-card {
  min-height: 0;
  padding: 0.95rem;
}

.input-step-card .step-header {
  padding: 0;
  margin-bottom: 0.8rem;
}

.step-input-wrapper {
  border-radius: 1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
}

.results-card {
  padding: 1rem;
}

.btn-clear-calc {
  border-radius: 999px;
  min-height: 34px;
  padding: 0.35rem 0.75rem;
}

.result-box {
  border-radius: 1rem;
  padding: 0.9rem;
}

.result-box-label,
.result-box-note,
.calculation-summary {
  font-size: 0.76rem;
}

:root[data-theme="light"] .page-header .container,
:root[data-theme="light"] .step-card,
:root[data-theme="light"] .exchange-rates-card,
:root[data-theme="light"] .input-step-card,
:root[data-theme="light"] .results-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,252,0.96));
  border-color: rgba(15,23,42,0.1);
  box-shadow:
    0 18px 38px rgba(15,23,42,0.07),
    0 1px 0 rgba(255,255,255,0.75) inset;
}

:root[data-theme="light"] .step-card:hover,
:root[data-theme="light"] .results-card:hover,
:root[data-theme="light"] .input-step-card:hover {
  box-shadow: 0 22px 44px rgba(15,23,42,0.1);
  border-color: rgba(15,23,42,0.13);
}

:root[data-theme="light"] .calculator-badge,
:root[data-theme="light"] .step-input-wrapper,
:root[data-theme="light"] .order-state-item {
  background: rgba(15,23,42,0.04);
  border-color: rgba(15,23,42,0.08);
}

:root[data-theme="light"] .page-title,
:root[data-theme="light"] .step-title,
:root[data-theme="light"] .step-subtitle,
:root[data-theme="light"] .calculator-main-title,
:root[data-theme="light"] .order-state-name {
  color: #101828;
}

:root[data-theme="light"] .calculator-main-subtitle,
:root[data-theme="light"] .step-content p,
:root[data-theme="light"] .step-list li,
:root[data-theme="light"] .order-state-desc,
:root[data-theme="light"] .calculator-badge {
  color: rgba(16,24,40,0.72);
}

/* ============================================
   VISUAL TUTORIAL PAGE
   ============================================ */
.tutorial-page {
  padding: 1rem 0 2.5rem;
  background: linear-gradient(180deg, #f6f7fb 0%, #ffffff 100%);
}

.tutorial-shell {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 1rem;
}

.tutorial-hero {
  text-align: center;
  margin-bottom: 1.5rem;
}

.tutorial-kicker {
  display: inline-block;
  margin-bottom: 0.45rem;
  color: rgba(16,24,40,0.58);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tutorial-title {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
  color: #101828;
}

.tutorial-intro {
  max-width: 640px;
  margin: 0 auto;
  color: rgba(16,24,40,0.68);
  font-size: 1rem;
  line-height: 1.7;
}

.tutorial-steps {
  display: grid;
  gap: 1rem;
}

.tutorial-step {
  position: relative;
  padding: 1.1rem 1.1rem 1.2rem 1.35rem;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 1.25rem;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 16px 36px rgba(15,23,42,0.08);
}

.tutorial-step::before {
  content: "";
  position: absolute;
  left: 0.82rem;
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(220,38,38,0.22), rgba(220,38,38,0.04));
}

.tutorial-step-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  margin-bottom: 0.9rem;
}

.tutorial-step-number {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
  box-shadow: 0 10px 20px rgba(220,38,38,0.2);
}

.tutorial-step h2 {
  margin: 0 0 0.28rem;
  font-size: 1.18rem;
  line-height: 1.2;
  color: #101828;
}

.tutorial-step p {
  margin: 0;
  color: rgba(16,24,40,0.68);
  line-height: 1.7;
}

.tutorial-figure {
  margin: 0 0 0 2.15rem;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,0.08);
  background: #f8fafc;
  box-shadow: 0 12px 28px rgba(15,23,42,0.08);
}

.tutorial-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #fff;
}

/* ============================================
   NAVBAR / TUTORIAL / BATCHES REFINEMENTS
   ============================================ */

.header {
  border-bottom: 1px solid rgba(15,23,42,0.07);
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.header .container {
  max-width: 1220px;
}

.header-content {
  min-height: 70px;
  gap: 1.2rem;
}

.logo a {
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #101828;
}

.nav {
  gap: 1rem;
}

.nav-list {
  gap: 0.38rem;
  align-items: center;
}

.nav-link,
.nav-dropdown-toggle {
  min-height: 42px;
  padding: 0.6rem 0.92rem;
  border-radius: 0.9rem;
  color: rgba(16,24,40,0.82);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1;
}

.nav-link:hover,
.nav-dropdown:hover > .nav-dropdown-toggle,
.nav-dropdown.open > .nav-dropdown-toggle {
  color: #101828;
  background: rgba(15,23,42,0.045);
}

.nav-dropdown {
  position: relative;
}

.nav-dropdown-menu {
  top: calc(100% + 0.55rem);
  left: 50%;
  min-width: 236px;
  padding: 0.48rem;
  gap: 0.15rem;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 1rem;
  background: rgba(255,255,255,0.98);
  box-shadow: 0 18px 38px rgba(15,23,42,0.12);
  transform: translate(-50%, 10px);
  z-index: 40;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  transform: translate(-50%, 0);
}

.nav-dropdown-link {
  min-height: 42px;
  padding: 0.78rem 0.88rem;
  border-radius: 0.82rem;
  color: rgba(16,24,40,0.82);
  font-size: 0.92rem;
  font-weight: 500;
}

.nav-dropdown-link:hover {
  background: rgba(15,23,42,0.045);
  color: #101828;
}

.header-actions {
  gap: 0.55rem;
}

.btn-register {
  min-height: 42px;
  padding: 0.78rem 1rem;
  border-radius: 0.85rem;
  font-weight: 700;
  box-shadow: 0 12px 24px rgba(220,38,38,0.18);
}

.theme-toggle,
.config-toggle {
  width: 42px;
  height: 42px;
  border-radius: 0.85rem;
  border: 1px solid rgba(15,23,42,0.08);
  background: #fff;
  color: rgba(16,24,40,0.72);
  box-shadow: 0 8px 18px rgba(15,23,42,0.08);
}

.theme-toggle:hover,
.config-toggle:hover {
  color: #101828;
  transform: translateY(-1px);
}

.tutorial-page {
  padding: 2rem 0 4rem;
  background:
    radial-gradient(circle at top left, rgba(220,38,38,0.09), transparent 26%),
    linear-gradient(180deg, #f8f9fc 0%, #ffffff 100%);
}

.tutorial-shell {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 1rem;
}

.tutorial-hero {
  margin: 0 auto 2rem;
  text-align: center;
}

.tutorial-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0.35rem 0.72rem;
  border-radius: 999px;
  border: 1px solid rgba(220,38,38,0.12);
  background: rgba(220,38,38,0.06);
  color: rgba(185,28,28,0.9);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tutorial-title {
  margin: 0.95rem 0 0.75rem;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 0.94;
  letter-spacing: -0.06em;
}

.tutorial-intro {
  max-width: 620px;
  color: rgba(16,24,40,0.68);
  font-size: 1rem;
  line-height: 1.75;
}

.tutorial-steps {
  position: relative;
  gap: 1.2rem;
}

.tutorial-steps::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 0.2rem;
  bottom: 0.2rem;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(220,38,38,0.16), rgba(220,38,38,0.02));
}

.tutorial-step {
  padding: 1.3rem 1.3rem 1.4rem 1.55rem;
  border-radius: 1.4rem;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.96);
  box-shadow: 0 18px 38px rgba(15,23,42,0.08);
}

.tutorial-step::before {
  display: none;
}

.tutorial-step-head {
  gap: 0.95rem;
  margin-bottom: 1rem;
}

.tutorial-step-number {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  font-size: 0.95rem;
  box-shadow: 0 14px 28px rgba(220,38,38,0.2);
}

.tutorial-step h2 {
  margin: 0 0 0.32rem;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.22;
}

.tutorial-step p {
  font-size: 0.97rem;
  line-height: 1.72;
}

.tutorial-figure {
  margin-left: 2.35rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(15,23,42,0.08);
  background: #fff;
  box-shadow: 0 14px 28px rgba(15,23,42,0.07);
}

.tutorial-figure img {
  width: 100%;
  background: #fff;
}

.batches-page {
  padding: 2rem 0 4rem;
  background:
    radial-gradient(circle at top left, rgba(220,38,38,0.08), transparent 26%),
    linear-gradient(180deg, #f8f9fc 0%, #ffffff 100%);
}

.batches-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1rem;
}

.batches-hero {
  max-width: 760px;
  margin: 0 auto 1.5rem;
  text-align: center;
}

.batches-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0.35rem 0.72rem;
  border-radius: 999px;
  border: 1px solid rgba(220,38,38,0.12);
  background: rgba(220,38,38,0.06);
  color: rgba(185,28,28,0.9);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.batches-title {
  margin: 0.95rem 0 0.7rem;
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 5vw, 3.9rem);
  line-height: 0.94;
  letter-spacing: -0.06em;
  color: #101828;
}

.batches-intro {
  color: rgba(16,24,40,0.68);
  font-size: 1rem;
  line-height: 1.72;
}

.batches-toolbar {
  display: grid;
  gap: 0.95rem;
  margin-bottom: 1.15rem;
}

.batches-search {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.75rem;
  min-height: 62px;
  padding: 0 1rem;
  border-radius: 1.2rem;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.98);
  box-shadow: 0 16px 34px rgba(15,23,42,0.08);
  color: rgba(16,24,40,0.45);
}

.batches-search input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: #101828;
  font-size: 0.98rem;
}

.batches-search input::placeholder {
  color: rgba(16,24,40,0.45);
}

.batches-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.batches-chip {
  min-height: 38px;
  padding: 0.62rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.92);
  color: rgba(16,24,40,0.72);
  font-size: 0.88rem;
  font-weight: 600;
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.batches-chip:hover {
  transform: translateY(-1px);
  color: #101828;
  box-shadow: 0 10px 22px rgba(15,23,42,0.08);
}

.batches-chip.active {
  border-color: transparent;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  box-shadow: 0 14px 28px rgba(220,38,38,0.22);
}

.batches-table-card {
  padding: 1.2rem;
  border-radius: 1.5rem;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.98);
  box-shadow: 0 18px 40px rgba(15,23,42,0.08);
}

.batch-table-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: 1rem;
  align-items: end;
  margin-bottom: 1rem;
}

.batch-table-header h2 {
  margin: 0.4rem 0 0;
  font-size: 1.28rem;
  line-height: 1.15;
  color: #101828;
}

.batch-table-header p {
  color: rgba(16,24,40,0.62);
  line-height: 1.7;
}

.batch-table-wrap {
  overflow-x: auto;
  border-radius: 1.2rem;
  border: 1px solid rgba(15,23,42,0.08);
  background: #fff;
}

.batch-table {
  width: 100%;
  min-width: 780px;
  border-collapse: separate;
  border-spacing: 0;
}

.batch-table th,
.batch-table td {
  padding: 1.05rem 1.15rem;
  border-bottom: 1px solid rgba(15,23,42,0.08);
  text-align: left;
}

.batch-table thead th {
  background: rgba(15,23,42,0.025);
  color: rgba(16,24,40,0.55);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.batch-table tbody tr:last-child td {
  border-bottom: 0;
}

.batch-table tbody tr:hover {
  background: rgba(15,23,42,0.02);
}

.batch-table td {
  color: rgba(16,24,40,0.76);
  font-size: 0.97rem;
}

.batch-table td:first-child {
  color: #101828;
  font-weight: 700;
}

.batch-value {
  color: #f97316 !important;
  font-weight: 700;
}

:root[data-theme="dark"] .header {
  background: rgba(5,8,15,0.82);
  border-bottom-color: rgba(255,255,255,0.06);
}

:root[data-theme="dark"] .logo a,
:root[data-theme="dark"] .nav-link,
:root[data-theme="dark"] .nav-dropdown-toggle {
  color: rgba(255,255,255,0.88);
}

:root[data-theme="dark"] .nav-link:hover,
:root[data-theme="dark"] .nav-dropdown:hover > .nav-dropdown-toggle,
:root[data-theme="dark"] .nav-dropdown.open > .nav-dropdown-toggle {
  color: #fff;
  background: rgba(255,255,255,0.06);
}

:root[data-theme="dark"] .nav-dropdown-menu {
  background: rgba(11,15,26,0.98);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 24px 50px rgba(0,0,0,0.35);
}

:root[data-theme="dark"] .nav-dropdown-link {
  color: rgba(255,255,255,0.82);
}

:root[data-theme="dark"] .nav-dropdown-link:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}

:root[data-theme="dark"] .theme-toggle,
:root[data-theme="dark"] .config-toggle {
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.72);
  box-shadow: none;
}

:root[data-theme="dark"] .tutorial-page,
:root[data-theme="dark"] .batches-page {
  background:
    radial-gradient(circle at top left, rgba(220,38,38,0.12), transparent 26%),
    linear-gradient(180deg, #05080f 0%, #0b0f1a 100%);
}

:root[data-theme="dark"] .tutorial-title,
:root[data-theme="dark"] .batches-title,
:root[data-theme="dark"] .tutorial-step h2,
:root[data-theme="dark"] .batch-table-header h2,
:root[data-theme="dark"] .batch-table td:first-child {
  color: #fff;
}

:root[data-theme="dark"] .tutorial-intro,
:root[data-theme="dark"] .batches-intro,
:root[data-theme="dark"] .tutorial-step p,
:root[data-theme="dark"] .batch-table-header p,
:root[data-theme="dark"] .batch-table td {
  color: rgba(255,255,255,0.72);
}

:root[data-theme="dark"] .tutorial-step,
:root[data-theme="dark"] .batches-table-card,
:root[data-theme="dark"] .batches-search,
:root[data-theme="dark"] .batch-table-wrap {
  border-color: rgba(255,255,255,0.08);
  background: rgba(11,15,26,0.94);
  box-shadow: 0 18px 36px rgba(0,0,0,0.25);
}

:root[data-theme="dark"] .tutorial-figure {
  border-color: rgba(255,255,255,0.08);
  background: rgba(11,15,26,0.94);
}

:root[data-theme="dark"] .tutorial-figure img {
  background: rgba(11,15,26,0.94);
}

:root[data-theme="dark"] .batches-search,
:root[data-theme="dark"] .batches-search input,
:root[data-theme="dark"] .batches-search input::placeholder {
  color: rgba(255,255,255,0.72);
}

:root[data-theme="dark"] .batches-chip {
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.76);
}

:root[data-theme="dark"] .batch-table th,
:root[data-theme="dark"] .batch-table td {
  border-bottom-color: rgba(255,255,255,0.08);
}

:root[data-theme="dark"] .batch-table thead th {
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.52);
}

:root[data-theme="dark"] .batch-table tbody tr:hover {
  background: rgba(255,255,255,0.03);
}

@media (max-width: 1100px) {
  .home-hero-layout,
  .home-section-heading,
  .home-route-layout,
  .home-community-card,
  .resource-hero,
  .resource-cta-card {
    grid-template-columns: 1fr;
  }

  .home-category-grid,
  .home-guide-grid,
  .home-route-cards,
  .resource-grid,
  .resource-step-grid,
  .resource-dual-grid,
  .steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .batch-table-header {
    grid-template-columns: 1fr;
  }

  .batch-table-header {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .home-hero {
    padding-top: 0.7rem;
  }

  .home-hero-copy,
  .home-hero-aside,
  .home-category-card,
  .home-guide-card,
  .home-route-card,
  .home-community-card,
  .resource-panel,
  .resource-card,
  .resource-step-card,
  .resource-cta-card,
  .page-header .container,
  .step-card,
  .exchange-rates-card,
  .input-step-card,
  .results-card {
    padding: 1.1rem;
    border-radius: 1.3rem;
  }

  .hero-panel-grid,
  .home-category-grid,
  .home-guide-grid,
  .home-route-cards,
  .resource-mini-grid,
  .resource-grid,
  .resource-step-grid,
  .resource-dual-grid,
  .steps-grid {
    grid-template-columns: 1fr;
  }

  .home-title {
    max-width: 100%;
    font-size: clamp(1.8rem, 9vw, 2.5rem);
  }

  .resource-page {
    padding-top: 0.7rem;
  }

  .resource-title {
    max-width: 100%;
    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }

  .page-title,
  .calculator-main-title {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }

  .tutorial-page {
    padding-top: 0.8rem;
  }

  .header-content {
    min-height: 64px;
  }

  .nav-dropdown-menu {
    left: 0;
    transform: none;
  }

  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown.open .nav-dropdown-menu {
    transform: none;
  }

  .tutorial-shell,
  .batches-shell {
    padding: 0 0.8rem;
  }

  .tutorial-title,
  .batches-title {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }

  .tutorial-step {
    padding: 1rem 1rem 1.1rem 1.15rem;
  }

  .tutorial-steps::before {
    left: 0.92rem;
  }

  .tutorial-step-head {
    gap: 0.7rem;
  }

  .tutorial-step h2 {
    font-size: 1.02rem;
  }

  .tutorial-figure {
    margin-left: 0;
  }

  .batches-search {
    min-height: 56px;
  }

  .batch-table th,
  .batch-table td {
    padding: 0.9rem 0.9rem;
  }

  .home-search-shell {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }

  .home-search-icon {
    display: none;
  }

  .home-search-button,
  .home-primary-button,
  .home-secondary-button {
    width: 100%;
  }

  .home-stat-card {
    min-width: calc(50% - 0.5rem);
  }

  .home-discovery .featured-products-modern .carousel-item {
    min-width: 156px !important;
    max-width: 156px !important;
  }
}
  .hero-title {
    font-size: 1.5rem;
  }
  
  .section-title {
    font-size: 1.5rem;
  }
  
  .page-title {
    font-size: 1.5rem;
  }
  
  .products-grid {
    gap: var(--spacing-xs);
    padding: 0 var(--spacing-xs);
  }
  
  .product-card {
    border-radius: var(--radius-sm);
  }
}
  

/* Fix for featured products link */
.home-featured-link {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  padding: 10px 12px !important;
  margin-top: 10px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #fff !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  text-align: center;
}
.home-featured-link:hover {
  background: var(--primary-color, #dc2626) !important;
  border-color: var(--primary-color, #dc2626) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}

/* =========================================
   RESPONSIVE FIXES 
   ========================================= */
@media (max-width: 1024px) {
  .mobile-menu-toggle { 
    z-index: 999999 !important; 
    position: relative !important; 
  }
  .nav-list { 
    z-index: 999998 !important; 
  }
  #header, .header { 
    z-index: 999997 !important; 
    position: sticky !important;
    top: 0 !important;
  }
  .filter-scroll, .category-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
    z-index: 50 !important;
    pointer-events: auto !important;
  }
}

/* =========================================
   LIGHT MODE HEADER FIXES
   ========================================= */
:root[data-theme="light"] .header {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
:root[data-theme="light"] .logo a,
:root[data-theme="light"] .nav-link,
:root[data-theme="light"] .nav-dropdown-toggle,
:root[data-theme="light"] .header-search-input {
  color: #1a1a1a !important;
}
:root[data-theme="light"] .header-search-field {
  background: rgba(0,0,0,0.05) !important;
  border-color: rgba(0,0,0,0.1) !important;
}
:root[data-theme="light"] .header-search-input::placeholder {
  color: rgba(0,0,0,0.4) !important;
}
:root[data-theme="light"] .header-search-icon,
:root[data-theme="light"] .header-search-kbd {
  color: #555 !important;
  border-color: rgba(0,0,0,0.2) !important;
}
:root[data-theme="light"] .config-toggle {
  color: #1a1a1a !important;
  background: rgba(0,0,0,0.05) !important;
}
:root[data-theme="light"] .config-toggle svg {
  stroke: #1a1a1a !important;
}
:root[data-theme="light"] .config-toggle:hover {
  background: rgba(0,0,0,0.1) !important;
}
:root[data-theme="light"] .mobile-menu-toggle span {
  background-color: #1a1a1a !important;
}

/* =========================================
   REPSHEET-STYLE PREFERENCES (pref-*)
   ========================================= */
.pref-title {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  padding: 8px 12px 6px;
}
.pref-main, .pref-sub { display: flex; flex-direction: column; }
.pref-sub { display: none; }
.pref-sub.active { display: flex; }
.pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.pref-row:hover { background: rgba(255,255,255,0.1); }
.pref-row-label { flex: 1; text-align: left; }
.pref-row-value {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
}
.pref-row-value svg { opacity: 0.5; flex-shrink: 0; }
.pref-back {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: transparent;
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 4px;
}
.pref-back:hover { color: #fff; }
.pref-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 34px;
  padding: 0 12px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: rgba(255,255,255,0.9);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.pref-option > span { display: flex; align-items: center; gap: 8px; }
.pref-option:hover { background: rgba(255,255,255,0.08); }
.pref-option.active { background: rgba(255,255,255,0.15); color: #fff; }
.pref-check { display: none; width: 14px; height: 14px; flex-shrink: 0; }
.pref-option.active .pref-check { display: block; }
.pref-agent-icon { width: 16px; height: 16px; border-radius: 3px; object-fit: contain; flex-shrink: 0; }
:root[data-theme="light"] .config-panel-content { background: #fff !important; border-color: rgba(0,0,0,0.12) !important; box-shadow: 0 16px 48px rgba(0,0,0,0.18) !important; }
:root[data-theme="light"] .pref-title { color: rgba(0,0,0,0.5); }
:root[data-theme="light"] .pref-row { color: #1a1a1a; }
:root[data-theme="light"] .pref-row:hover { background: rgba(0,0,0,0.06); }
:root[data-theme="light"] .pref-row-value { color: rgba(0,0,0,0.55); }
:root[data-theme="light"] .pref-back { color: rgba(0,0,0,0.5); border-bottom-color: rgba(0,0,0,0.08); }
:root[data-theme="light"] .pref-option { color: rgba(0,0,0,0.85); }
:root[data-theme="light"] .pref-option:hover { background: rgba(0,0,0,0.06); }
:root[data-theme="light"] .pref-option.active { background: rgba(0,0,0,0.1); color: #000; }
:root[data-theme="light"] .pref-option.active .pref-check { stroke: #000; }
@media (max-width: 767px) {
  .config-panel { right: 8px !important; left: auto !important; top: 70px !important; }
  .config-panel-content { width: 260px; max-width: calc(100vw - 16px); }
}