/* ==========================================================================
   NexoMarket — Temu Retail Design System (Local Sparks & Dynamic Commerce)
   Fusión: Stitch Design System + Neuromarketing Retail + Identidad OMNEX
   Colores: Blanco Puro (#FFF), Naranja Retail (#FA541C), Verde WhatsApp (#25D366)
   ========================================================================== */

:root {
  /* Paleta Oficial Retail Temu */
  --color-bg-base: #FAF8FF;          /* Lienzo marfil claro y fresco */
  --color-surface: #FFFFFF;          /* Fondo tarjetas blanco puro */
  --color-surface-dim: #F1F5F9;      /* Gris tenue para separadores y hover */
  --color-primary: #FA541C;          /* Naranja Temu: Acción inmediata y ofertas */
  --color-primary-hover: #D63D00;    /* Naranja oscuro para hover de botones */
  --color-secondary: #FAAD14;        /* Dorado Amber: Calificaciones y badges */
  --color-tertiary: #10B981;         /* Verde Esmeralda: Confianza y garantías */
  --color-wa-green: #25D366;         /* Verde WhatsApp oficial: Conversión directa */
  --color-text-main: #0F172A;        /* Slate profundo para títulos y legibilidad */
  --color-text-muted: #64748B;       /* Texto secundario y especificaciones */
  --color-border: #E2E8F0;           /* Bordes sutiles y limpios */

  --font-title: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

*, ::before, ::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  background-color: var(--color-bg-base);
  color: var(--color-text-main);
  font-family: var(--font-body);
  scroll-behavior: smooth;
}

/* Tipografías Utilitarias */
.font-title {
  font-family: var(--font-title);
}

.font-body {
  font-family: var(--font-body);
}

/* Tarjetas Retail Blancas con Elevación Suave */
.retail-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.retail-card:hover {
  border-color: #CBD5E1;
}

/* Botones Retail Temu con Shimmer de Conversión */
.btn-temu-orange {
  background: linear-gradient(135deg, #FA541C 0%, #EA4C14 100%);
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
}

.btn-temu-orange:hover {
  background: linear-gradient(135deg, #FF6A38 0%, #FA541C 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(250, 84, 28, 0.35);
}

.btn-temu-orange:active {
  transform: translateY(0);
}

/* Shimmer de luz continua para botones de alta conversión */
.btn-temu-orange::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 20%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 80%
  );
  transform: translateX(-100%);
  animation: temuShimmer 3.5s infinite;
}

@keyframes temuShimmer {
  100% {
    transform: translateX(100%);
  }
}

/* Botón WhatsApp de Conversión Directa */
.btn-whatsapp-temu {
  background: #25D366;
  color: #FFFFFF;
  font-weight: 700;
  transition: all 0.2s ease;
}

.btn-whatsapp-temu:hover {
  background: #20BA5A;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35);
  transform: translateY(-1px);
}

/* Borde Láser Temu (Border Beam) para Emprendedores Destacados */
.border-beam-card-temu {
  position: relative;
  border-radius: 1rem;
  background: #FFFFFF;
  padding: 1px;
}

.border-beam-card-temu::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 1.1rem;
  background: linear-gradient(
    90deg,
    #FA541C 0%,
    #FAAD14 25%,
    #10B981 50%,
    #FAAD14 75%,
    #FA541C 100%
  );
  background-size: 300% 300%;
  animation: borderBeamRotate 4s linear infinite;
  z-index: 0;
}

.border-beam-card-temu > * {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  border-radius: 1rem;
}

@keyframes borderBeamRotate {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Micro-píldoras de Categorías */
.category-pill-btn {
  user-select: none;
  -webkit-user-select: none;
}

.category-pill-btn.active {
  background-color: #0F172A;
  color: #FFFFFF;
  font-weight: 700;
}

/* Ocultar barra de scroll en contenedores horizontales */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Badge de Descuento Temu (Color Naranja Fuerte) */
.badge-temu-discount {
  background-color: #FFF2E8;
  color: #FA541C;
  font-weight: 800;
  border: 1px solid #FFD8BF;
}

/* Badge de Garantía de Entrega Garita */
.badge-temu-trust {
  background-color: #E6F7FF;
  color: #0050B3;
  font-weight: 700;
  border: 1px solid #BAE7FF;
}

/* Sello Latente OMNEX Light */
.latent-glow-omnex-light {
  animation: omnexBreathLight 4s ease-in-out infinite;
}

@keyframes omnexBreathLight {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(37, 99, 235, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(37, 99, 235, 0.5));
  }
}

/* ==========================================================================
   VecinoBot 3D Animation & Floating Micro-Motion
   ========================================================================== */

.vecinobot-float {
  animation: vecinoFloat 3.2s ease-in-out infinite;
  /* Sombra suave y realista que respeta la transparencia del robot */
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.12));
}

@keyframes vecinoFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(2deg);
  }
}

.vecinobot-pulse {
  animation: vecinoPulse 2.8s ease-in-out infinite;
}

@keyframes vecinoPulse {
  0%, 100% {
    box-shadow: 0 4px 14px rgba(250, 84, 28, 0.25);
  }
  50% {
    box-shadow: 0 8px 24px rgba(250, 84, 28, 0.45);
  }
}