/*
 * NovaNest HQ — Design System v2.0
 * Auto-generado por Web Designer Agent
 * NO EDITAR MANUALMENTE — Los cambios serán sobreescritos.
 * Para modificar: editar DESIGN_SYSTEM en agents/web_designer.py
 *
 * Inspirado en: Teenage Engineering + Apple
 * Estética: Bento Grid · Dark Mode · Cyan Accent · Mobile-First
 */

/* ─── Color Tokens ─────────────────────────────────────────────────── */
:root {
  --color-bg:           #0A0C10;
  --color-surface:      #111318;
  --color-surface-r:    #1A1D24;
  --color-accent:       #00FFC8;
  --color-accent-h:     #00E5B5;
  --color-text:         #F0F2F5;
  --color-text-2:       #8B8FA8;
  --color-text-muted:   #4A4D5C;
  --color-danger:       #FF4D6A;
  --color-warning:      #FFB547;
  --color-success:      #00FFC8;

  /* ─── Typography ────────────────────────────────────────────────── */
  --font-primary:       Inter, DM Sans, system-ui, -apple-system, sans-serif;
  --font-mono:          JetBrains Mono, Fira Code, monospace;
  --text-xs:            0.75rem;
  --text-sm:            0.875rem;
  --text-base:          1rem;
  --text-lg:            1.125rem;
  --text-xl:            1.25rem;
  --text-2xl:           1.5rem;
  --text-3xl:           1.875rem;
  --text-4xl:           2.25rem;
  --text-5xl:           3rem;
  --font-normal:        400;
  --font-medium:        500;
  --font-bold:          700;

  /* ─── Spacing & Shape ───────────────────────────────────────────── */
  --grid-gap:           1rem;
  --card-pad:           1.25rem;
  --section-v:          4rem;
  --radius-sm:          0.5rem;
  --radius-md:          0.75rem;
  --radius-lg:          1rem;
  --radius-xl:          1.5rem;

  /* ─── Transition ────────────────────────────────────────────────── */
  --ease-out:           cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:        cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:      150ms;
  --duration-base:      250ms;
  --duration-slow:      400ms;

  /* ─── Z-Index Scale ─────────────────────────────────────────────── */
  --z-base:     1;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;
}

/* ─── Base Reset ────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-bg);
  color:            var(--color-text);
  font-family:      var(--font-primary);
  font-size:        var(--text-base);
  font-weight:      var(--font-normal);
  line-height:      1.6;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Bento Grid System ─────────────────────────────────────────────── */
/* Mobile-First: 1 col → 2 col → 4 col */
.bento-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--grid-gap);
  width:                 100%;
}

@media (min-width: 640px) {
  .bento-grid        { grid-template-columns: repeat(2, 1fr); }
  .bento-span-full   { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .bento-grid        { grid-template-columns: repeat(4, 1fr); }
  .bento-span-2      { grid-column: span 2; }
  .bento-span-3      { grid-column: span 3; }
  .bento-span-full   { grid-column: 1 / -1; }
  .bento-row-2       { grid-row: span 2; }
}

/* ─── Bento Card ─────────────────────────────────────────────────────── */
.bento-card {
  background:    var(--color-surface);
  border-radius: var(--radius-lg);
  padding:       var(--card-pad);
  border:        1px solid rgba(255,255,255,0.06);
  transition:    transform var(--duration-base) var(--ease-out),
                 border-color var(--duration-base) var(--ease-out);
  will-change:   transform;
}

.bento-card:hover {
  transform:    translateY(-2px);
  border-color: rgba(0,255,200,0.2);
}

/* ─── Product Card ───────────────────────────────────────────────────── */
.product-card {
  background:    var(--color-surface);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  border:        1px solid rgba(255,255,255,0.06);
  transition:    transform var(--duration-base) var(--ease-out),
                 box-shadow var(--duration-base) var(--ease-out);
}

.product-card:hover {
  transform:    translateY(-4px);
  box-shadow:   0 20px 40px rgba(0,0,0,0.4),
                0 0 0 1px rgba(0,255,200,0.15);
}

.product-card__img-wrap {
  position:       relative;
  aspect-ratio:   1 / 1;
  overflow:       hidden;
  background:     var(--color-surface-r);
}

.product-card__img {
  width:          100%;
  height:         100%;
  object-fit:     cover;
  transition:     transform var(--duration-slow) var(--ease-out);
}

.product-card:hover .product-card__img {
  transform: scale(1.04);
}

.product-card__body {
  padding:        var(--card-pad);
  display:        flex;
  flex-direction: column;
  flex:           1;
  gap:            0.5rem;
}

.product-card__title {
  font-size:   var(--text-sm);
  font-weight: var(--font-medium);
  color:       var(--color-text);
  line-height: 1.4;
  display:     -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}

.product-card__price {
  font-size:   var(--text-lg);
  font-weight: var(--font-bold);
  color:       var(--color-accent);
  margin-top:  auto;
}

.product-card__price-compare {
  font-size:       var(--text-sm);
  color:           var(--color-text-muted);
  text-decoration: line-through;
}

/* ─── CTA Buttons ────────────────────────────────────────────────────── */
.btn-primary {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.5rem;
  background:      var(--color-accent);
  color:           var(--color-bg);
  font-family:     var(--font-primary);
  font-size:       var(--text-base);
  font-weight:     var(--font-bold);
  padding:         0.75rem 1.5rem;
  border-radius:   var(--radius-md);
  border:          none;
  cursor:          pointer;
  min-height:      44px;
  transition:      background var(--duration-fast) var(--ease-out),
                   transform  var(--duration-fast) var(--ease-out);
  text-decoration: none;
  white-space:     nowrap;
}

.btn-primary:hover  { background: var(--color-accent-h); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.5rem;
  background:      transparent;
  color:           var(--color-accent);
  font-family:     var(--font-primary);
  font-size:       var(--text-base);
  font-weight:     var(--font-medium);
  padding:         0.75rem 1.5rem;
  border-radius:   var(--radius-md);
  border:          1px solid var(--color-accent);
  cursor:          pointer;
  min-height:      44px;
  transition:      background var(--duration-fast) var(--ease-out),
                   color      var(--duration-fast) var(--ease-out);
  text-decoration: none;
}

.btn-secondary:hover {
  background: rgba(0,255,200,0.08);
}

/* ─── Sticky CTA (Mobile) ────────────────────────────────────────────── */
/* Visible solo en móvil — el CTA primario flota sobre el scroll */
.sticky-cta {
  position:         fixed;
  bottom:           0;
  left:             0;
  right:            0;
  z-index:          var(--z-sticky);
  padding:          1rem;
  background:       linear-gradient(to top, var(--color-bg) 60%, transparent);
  display:          none;
}

@media (max-width: 767px) {
  .sticky-cta { display: block; }
}

/* ─── Discount Badge ─────────────────────────────────────────────────── */
.badge-deal {
  display:       inline-flex;
  align-items:   center;
  gap:           0.25rem;
  background:    rgba(255,69,106,0.15);
  color:         var(--color-danger);
  border:        1px solid rgba(255,69,106,0.3);
  border-radius: var(--radius-sm);
  font-size:     var(--text-xs);
  font-weight:   var(--font-bold);
  padding:       0.2rem 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-new {
  background: rgba(0,255,200,0.12);
  color:      var(--color-accent);
  border:     1px solid rgba(0,255,200,0.25);
}

/* ─── Cross-Sell Section ─────────────────────────────────────────────── */
.cross-sell {
  margin-top:    var(--section-v);
  padding-top:   var(--section-v);
  border-top:    1px solid rgba(255,255,255,0.06);
}

.cross-sell__title {
  font-size:   var(--text-xl);
  font-weight: var(--font-bold);
  color:       var(--color-text);
  margin-bottom: 1.5rem;
}

/* Horizontal scroll on mobile */
.cross-sell__grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:                   var(--grid-gap);
}

@media (max-width: 767px) {
  .cross-sell__grid {
    display:    flex;
    overflow-x: auto;
    gap:        0.75rem;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
  }
  .cross-sell__grid::-webkit-scrollbar { display: none; }
  .cross-sell__grid .product-card {
    min-width: 150px;
    flex-shrink: 0;
  }
}

/* ─── Attribute Filters ──────────────────────────────────────────────── */
.filter-bar {
  display:    flex;
  flex-wrap:  wrap;
  gap:        0.5rem;
  margin-bottom: 1.5rem;
}

.filter-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           0.25rem;
  background:    var(--color-surface-r);
  color:         var(--color-text-2);
  border:        1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  font-size:     var(--text-sm);
  padding:       0.375rem 0.875rem;
  cursor:        pointer;
  transition:    all var(--duration-fast) var(--ease-out);
  white-space:   nowrap;
}

.filter-chip:hover,
.filter-chip.active {
  background:   rgba(0,255,200,0.1);
  color:        var(--color-accent);
  border-color: rgba(0,255,200,0.3);
}

/* ─── Hero Section ───────────────────────────────────────────────────── */
.hero {
  position:   relative;
  padding:    3rem 1rem;
  text-align: center;
  overflow:   hidden;
}

.hero__tag {
  display:       inline-block;
  font-size:     var(--text-sm);
  font-weight:   var(--font-medium);
  color:         var(--color-accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom:  0.75rem;
}

.hero__title {
  font-size:   clamp(var(--text-3xl), 6vw, var(--text-5xl));
  font-weight: var(--font-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color:       var(--color-text);
  margin-bottom: 1rem;
}

.hero__title span {
  color: var(--color-accent);
}

.hero__sub {
  font-size:     var(--text-lg);
  color:         var(--color-text-2);
  max-width:     540px;
  margin:        0 auto 2rem;
  line-height:   1.6;
}

/* ─── Trust Signals ──────────────────────────────────────────────────── */
.trust-bar {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             1.5rem;
  padding:         1.5rem 0;
  border-top:      1px solid rgba(255,255,255,0.06);
  border-bottom:   1px solid rgba(255,255,255,0.06);
}

.trust-item {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  font-size:   var(--text-sm);
  color:       var(--color-text-2);
}

.trust-item svg,
.trust-item span.icon {
  color: var(--color-accent);
  flex-shrink: 0;
}

/* ─── Section Container ──────────────────────────────────────────────── */
.container {
  width:      100%;
  max-width:  1200px;
  margin:     0 auto;
  padding:    0 1rem;
}

@media (min-width: 768px) {
  .container { padding: 0 1.5rem; }
}

@media (min-width: 1200px) {
  .container { padding: 0 2rem; }
}

.section {
  padding-top:    var(--section-v);
  padding-bottom: var(--section-v);
}

/* ─── Skeleton Loading ───────────────────────────────────────────────── */
@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface) 25%,
    var(--color-surface-r) 50%,
    var(--color-surface) 75%
  );
  background-size: 400px 100%;
  animation: skeleton-shimmer 1.4s infinite linear;
  border-radius: var(--radius-md);
}

/* ─── Utility Classes ────────────────────────────────────────────────── */
.text-accent   { color: var(--color-accent); }
.text-muted    { color: var(--color-text-muted); }
.text-danger   { color: var(--color-danger); }
.font-bold     { font-weight: var(--font-bold); }
.font-medium   { font-weight: var(--font-medium); }
.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;
}