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

:root {
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --bg:      #f0f4ff;
  --surface: #ffffff;
  --fg:      #0a1628;
  --muted:   #64748b;
  --border:  #e2e8f0;
  --input-bg: #f1f5f9;

  --primary:        #0053E2;
  --primary-light:  #e8f1ff;
  --primary-dark:   #0039a6;
  --accent:         #ff6b00;
  --accent-light:   #fff3e8;
  --accent-dark:    #cc5600;

  --success: #10b981;
  --warning: #f59e0b;
  --danger:  #ef4444;
  --info:    #3b82f6;

  --grad-hero:   linear-gradient(135deg, #001a4d 0%, #003080 40%, #0053E2 100%);
  --grad-card:   linear-gradient(145deg, #ffffff 0%, #f8faff 100%);
  --grad-accent: linear-gradient(135deg, #ff6b00 0%, #ff8c3d 100%);
  --grad-blue:   linear-gradient(135deg, #0053E2 0%, #0066ff 100%);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --ease-out:     cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:  cubic-bezier(0.32, 0.72, 0, 1);

  --shadow-xs: 0 1px 2px rgba(0,0,0,.03);
  --shadow-sm: 0 2px 6px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.03);
  --shadow-md: 0 8px 20px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04);
  --shadow-xl: 0 24px 60px rgba(0,0,0,.10), 0 6px 16px rgba(0,0,0,.05);

  --nav-h: 70px;
  --max-w: 1320px;
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

html { font-size:16px; scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }

body {
  font-family:var(--font-body);
  color:var(--fg);
  background:var(--bg);
  line-height:1.65;
  min-height:100vh;
  touch-action:manipulation;
}

h1,h2,h3,h4,h5,h6 {
  font-family:var(--font-display);
  line-height:1.15; letter-spacing:-0.025em;
}
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:none; }
img { max-width:100%; display:block; }

/* ── Nav ──────────────────────────────── */
.nav {
  position:sticky; top:0; z-index:100;
  height:var(--nav-h);
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center;
  padding:0 28px;
}
.nav-inner {
  width:100%; max-width:var(--max-w);
  margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo {
  font-family:var(--font-display);
  font-weight:800; font-size:1.3rem;
  color:var(--fg);
  display:flex; align-items:center; gap:10px;
}
.nav-logo-img { height:38px; width:auto; display:block; }

/* ── Search dropdown ───────────────────── */
.search-dd {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 440px;
  overflow-y: auto;
  z-index: 200;
  display: none;
}
.search-dd.open { display: block; }
.search-dd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background .12s;
  border-bottom: 1px solid var(--border);
}
.search-dd-item:last-child { border-bottom: none; }
.search-dd-item:hover,
.search-dd-item.highlight { background: var(--primary-light); }
.search-dd-img {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 1.2rem;
  overflow: hidden;
}
.search-dd-img img { width: 100%; height: 100%; object-fit: contain; }
.search-dd-info { flex: 1; min-width: 0; }
.search-dd-name {
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-dd-sku {
  font-size: .75rem;
  color: var(--muted);
  margin-top: 1px;
}
.search-dd-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
  color: var(--primary);
  white-space: nowrap;
}
.search-dd-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--muted);
  font-size: .88rem;
}

.nav-logo-icon {
  width:40px; height:40px; border-radius:var(--radius-sm);
  background:var(--grad-blue);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.1rem; box-shadow:0 4px 12px rgba(0,83,226,.35);
}
.nav-links { display:flex; align-items:center; gap:6px; list-style:none; }
.nav-links a {
  padding:8px 18px; border-radius:var(--radius-sm);
  font-size:.875rem; font-weight:600;
  color:var(--muted);
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out);
}
.nav-links a:hover { background:var(--primary-light); color:var(--primary); }
.nav-links a.active { background:var(--primary); color:#fff; box-shadow:0 2px 8px rgba(0,83,226,.3); }
.nav-cart {
  position:relative; padding:8px; border-radius:var(--radius-sm); color:var(--fg); font-size:1.2rem;
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out), transform 120ms var(--ease-out);
}
.nav-cart:hover { background:var(--primary-light); }
.nav-cart:active { transform:scale(.94); }
.nav-cart-badge {
  position:absolute; top:-4px; right:-6px;
  min-width:20px; height:20px;
  border-radius:10px; padding:0 5px;
  background:var(--grad-accent); color:#fff;
  font-size:.68rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-body); box-shadow:0 2px 8px rgba(255,107,0,.4);
}

/* ── Buttons ──────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 24px; border-radius:var(--radius-sm);
  font-family:var(--font-display); font-size:.9rem; font-weight:700;
  border:none; cursor:pointer;
  transition: transform 160ms var(--ease-out), box-shadow 180ms var(--ease-out), background-color 180ms var(--ease-out), color 180ms var(--ease-out);
  text-decoration:none; line-height:1.4; letter-spacing:-0.01em;
}
.btn:hover { text-decoration:none; transform:translateY(-1px); }
.btn:active { transform:translateY(0) scale(.97); transition-duration:80ms; }
.btn-primary { background:var(--grad-blue); color:#fff; box-shadow:0 4px 16px rgba(0,83,226,.3); }
.btn-primary:hover { box-shadow:0 6px 20px rgba(0,83,226,.45); transform:translateY(-2px); }
.btn-accent { background:var(--grad-accent); color:#fff; box-shadow:0 4px 16px rgba(255,107,0,.3); }
.btn-accent:hover { box-shadow:0 6px 20px rgba(255,107,0,.45); transform:translateY(-2px); }
.btn-outline { background:transparent; color:var(--primary); border:2px solid var(--primary); }
.btn-outline:hover { background:var(--primary-light); }
.btn-ghost { background:transparent; color:var(--muted); }
.btn-ghost:hover { background:var(--input-bg); color:var(--fg); }
.btn-sm { padding:7px 16px; font-size:.82rem; }
.btn-lg { padding:15px 36px; font-size:1.05rem; border-radius:var(--radius-md); }
.btn-full { width:100%; }
.btn-icon { width:42px; height:42px; padding:0; border-radius:var(--radius-sm); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-danger:hover { background:#dc2626; }

/* ── Forms ────────────────────────────── */
.form-group { margin-bottom:18px; }
.form-label {
  display:block; margin-bottom:6px;
  font-size:.75rem; font-weight:700; color:var(--fg);
  font-family:var(--font-display); letter-spacing:.04em; text-transform:uppercase;
}
.form-input, .form-select, .form-textarea {
  width:100%; padding:11px 15px;
  border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-family:var(--font-body); font-size:.9rem;
  background:var(--surface); color:var(--fg);
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out), border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-light);
}
.form-textarea { min-height:100px; resize:vertical; }
.form-select { appearance:none; background-image:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTYgOEwxIDNoMTB6IiBmaWxsPSIjNjQ3NDhiIi8+PC9zdmc+'); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }
.form-check { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:.88rem; }

/* ── Cards ────────────────────────────── */
.card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px;
  transition: box-shadow 280ms var(--ease-out), transform 280ms var(--ease-out), border-color 280ms var(--ease-out);
}
.card:hover { box-shadow:var(--shadow-md); }

/* ── Badges ───────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:20px;
  font-size:.73rem; font-weight:700;
  font-family:var(--font-display);
}
.badge-primary { background:var(--primary-light); color:var(--primary); }
.badge-accent { background:var(--accent-light); color:var(--accent); }
.badge-success { background:#ecfdf5; color:var(--success); }
.badge-warning { background:#fffbeb; color:var(--warning); }
.badge-danger { background:#fef2f2; color:var(--danger); }

/* ── Page Shell ───────────────────────── */
.page {
  max-width:var(--max-w);
  margin:0 auto;
  padding:40px 28px;
}
.page-header {
  margin-bottom:36px;
}
.page-header h1 {
  font-size:2rem; font-weight:800;
  letter-spacing:-0.04em;
}
.page-header p { color:var(--muted); margin-top:6px; font-size:.92rem; }

/* ── Hero Slider ──────────────────────── */
.hero {
  position:relative; overflow:hidden;
  background:var(--grad-hero);
  min-height:560px;
  display:flex; align-items:center; justify-content:center;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTMwIDEwYTIgMiAwIDAxMiAydjE2aDE2YTIgMiAwIDAxMCA0SDMydjE2YTIgMiAwIDAxLTQgMFYzMkgxMmEyIDIgMCAwMTAtNGgxNlYxMmEyIDIgMCAwMTItMnoiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsLjAzKSIvPjwvc3ZnPg==');
  opacity:.6;
}
.hero::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:120px;
  background:linear-gradient(transparent, var(--bg));
}
.hero-inner {
  position:relative; z-index:1;
  max-width:900px; text-align:center;
  padding:40px 28px;
}
.hero-tag {
  display:inline-block;
  padding:6px 16px; border-radius:20px;
  background:rgba(255,255,255,.12);
  color:rgba(255,255,255,.85);
  font-size:.78rem; font-weight:700;
  font-family:var(--font-display);
  letter-spacing:.06em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.15);
  margin-bottom:20px;
}
.hero h1 {
  font-size:clamp(2.2rem, 5.5vw, 3.5rem);
  font-weight:900; color:#fff;
  letter-spacing:-0.05em; line-height:1.1;
  margin-bottom:16px;
}
.hero h1 span { background:var(--grad-accent); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero p {
  font-size:1.15rem; color:rgba(255,255,255,.7);
  max-width:560px; margin:0 auto 36px;
  line-height:1.6;
}
.hero .btn-group {
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
}
.hero .btn-hero {
  padding:16px 38px; border-radius:var(--radius-md);
  font-family:var(--font-display); font-size:1rem; font-weight:800;
  border:none; cursor:pointer;
  transition: transform 200ms var(--ease-out), box-shadow 220ms var(--ease-out), background-color 200ms var(--ease-out);
  text-decoration:none; letter-spacing:-0.01em;
}
.hero .btn-hero:hover { transform:translateY(-2px); }
.hero .btn-hero-primary {
  background:#fff; color:var(--primary);
  box-shadow:0 8px 30px rgba(0,0,0,.2);
}
.hero .btn-hero-primary:hover { box-shadow:0 12px 36px rgba(0,0,0,.3); }
.hero .btn-hero-ghost {
  background:rgba(255,255,255,.1); color:#fff;
  border:2px solid rgba(255,255,255,.25);
  backdrop-filter:blur(6px);
}
.hero .btn-hero-ghost:hover { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.4); }

/* Slider dots */
.hero-dots {
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; gap:10px;
}
.hero-dot {
  width:12px; height:12px; border-radius:50%;
  background:rgba(255,255,255,.3);
  border:none; cursor:pointer;
  transition: background-color 300ms var(--ease-out), width 300ms var(--ease-in-out);
}
.hero-dot.active { background:var(--accent); width:36px; border-radius:6px; }

/* Hero features row */
.hero-features {
  background:var(--grad-hero);
  padding:0 0 60px;
  position:relative; z-index:2;
}
.hero-features-grid {
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px; padding:0 28px;
}
.hero-feat {
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg);
  padding:28px;
  backdrop-filter:blur(10px);
  text-align:center; transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.hero-feat:hover { background:rgba(255,255,255,.14); transform:translateY(-3px); }
.hero-feat-icon {
  font-size:2.2rem; margin-bottom:14px;
}
.hero-feat h4 {
  color:#fff; font-size:1rem; margin-bottom:6px;
}
.hero-feat p {
  color:rgba(255,255,255,.6); font-size:.82rem;
  line-height:1.5;
}

/* ── Section headers ──────────────────── */
.section-divider {
  text-align:center; padding:64px 28px 36px;
}
.section-divider h2 {
  font-size:1.8rem; font-weight:800; letter-spacing:-0.04em;
}
.section-divider p {
  color:var(--muted); font-size:.92rem; margin-top:6px;
}

/* ── Screen Cards ─────────────────────── */
.screen-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:20px; max-width:var(--max-w);
  margin:0 auto; padding:0 28px 80px;
}
.screen-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px;
  transition: box-shadow 280ms var(--ease-out), transform 280ms var(--ease-out), border-color 280ms var(--ease-out);
  text-decoration:none; color:inherit;
  display:flex; gap:18px; align-items:flex-start;
  position:relative; overflow:hidden;
}
.screen-card::after {
  content:''; position:absolute; top:0; right:0;
  width:80px; height:80px;
  border-radius:0 0 0 80px;
  background:var(--primary-light);
  opacity:0; transition:opacity .3s;
}
.screen-card:hover::after { opacity:1; }
.screen-card:hover {
  box-shadow:var(--shadow-lg);
  transform:translateY(-3px);
  border-color:var(--primary);
}
.screen-card-icon {
  width:52px; height:52px; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; flex-shrink:0; position:relative; z-index:1;
}
.screen-card h3 { font-size:1.02rem; margin-bottom:4px; position:relative; z-index:1; }
.screen-card p { font-size:.82rem; color:var(--muted); line-height:1.5; position:relative; z-index:1; }

.cliente-bg { background:linear-gradient(135deg,#0053E2,#3b82f6); }
.admin-bg { background:linear-gradient(135deg,#ff6b00,#f59e0b); }

/* ── Auth Shell ───────────────────────── */
.auth-shell {
  min-height:100vh; display:grid; place-items:center;
  padding:24px;
  background:var(--grad-hero);
  position:relative;
}
.auth-shell::before {
  content:''; position:absolute; inset:0;
  opacity:.08;
  background:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==');
}
#loginForm, #registerForm { animation: heroRise 450ms var(--ease-out) backwards; }
.auth-card {
  position:relative; z-index:1;
  width:100%; max-width:440px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:44px 40px;
  box-shadow:var(--shadow-xl);
}
.auth-card h1 {
  font-size:1.75rem; text-align:center; margin-bottom:6px; letter-spacing:-.02em;
}
.auth-card .auth-subtitle {
  text-align:center; color:var(--fg);
  font-size:1.35rem; font-weight:800; letter-spacing:-.02em;
  font-family:var(--font-display); margin-bottom:28px;
}

/* ── Grid ─────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:20px; }

/* ── Product Card ─────────────────────── */
.product-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition: box-shadow 320ms var(--ease-out), transform 320ms var(--ease-out), border-color 320ms var(--ease-out);
  cursor:pointer;
  display:block; text-decoration:none; color:inherit;
}
.product-card:hover {
  box-shadow:var(--shadow-lg);
  transform:translateY(-4px);
  border-color:var(--primary);
}
.product-card-img {
  height:210px;
  background:var(--grad-hero);
  display:flex; align-items:center; justify-content:center;
  font-size:3.2rem; position:relative;
}
.product-card-img::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(transparent 60%, rgba(0,0,0,.15));
}
.product-card-img span {
  position:relative; z-index:1;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));
}
.product-card-featured {
  position:absolute; top:12px; right:12px; z-index:2;
  padding:4px 10px; border-radius:16px;
  background:var(--grad-accent); color:#fff;
  font-size:.68rem; font-weight:700; font-family:var(--font-display);
}
.product-card-body { padding:22px; position:relative; }
.product-card-category {
  font-size:.7rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:var(--accent);
  margin-bottom:8px;
}
.product-card-title {
  font-family:var(--font-display); font-size:1.08rem;
  font-weight:700; margin-bottom:4px;
  letter-spacing:-0.02em; line-height:1.3;
}
.product-card-sku {
  font-size:.75rem; color:var(--muted);
  margin-bottom:12px;
}
.product-card-price {
  font-family:var(--font-display); font-size:1.2rem;
  font-weight:800; color:var(--accent);
}
.product-card-price small {
  font-weight:400; font-size:.75rem; color:var(--muted);
}
.product-card-actions {
  display:flex; gap:8px; margin-top:16px; align-items:center;
}

/* ── Detail ───────────────────────────── */
.detail-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:52px;
}
.detail-image {
  border-radius:var(--radius-lg);
  background:#fff;
  aspect-ratio:1/1;
  width:100%; max-width:1200px; max-height:1200px;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  box-sizing:border-box;
}
.detail-image::before {
  content:''; position:absolute; left:0; right:0; bottom:0; height:5px;
  background:var(--cat-accent, #0053E2);
  z-index:2; opacity:.7;
}
/* titulo detalle estable: sin cambio de fuente en hover */
.detail-sku { font-size:.82rem; color:var(--muted); margin-bottom:10px; }
.detail-price { font-size:2.2rem; font-weight:900; color:var(--accent); margin:14px 0; }
.detail-price small { font-size:.88rem; font-weight:400; color:var(--muted); }
.detail-desc { color:var(--muted); line-height:1.7; margin-bottom:24px; font-size:.92rem; }
.detail-specs { margin-bottom:28px; }
.detail-specs h3 { font-size:1rem; margin-bottom:12px; }
.spec-row {
  display:flex; justify-content:space-between;
  padding:11px 0; border-bottom:1px solid var(--border);
  font-size:.86rem;
}
.spec-row:last-child { border-bottom:none; }
.spec-label { color:var(--muted); }
.spec-value { font-weight:700; }

/* ── Cart ─────────────────────────────── */
.cart-grid {
  display:grid; grid-template-columns:1fr 380px; gap:36px;
  align-items:start;
}
.cart-list { display:flex; flex-direction:column; gap:14px; }
.cart-item {
  display:grid;
  grid-template-columns:110px 1fr auto auto auto;
  gap:20px; align-items:center;
  padding:22px 24px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out), border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.cart-item:hover { box-shadow:var(--shadow-sm); }
.cart-item-img {
  width:110px; height:110px;
  border-radius:var(--radius-md);
  background:var(--bg);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.cart-item-img img { width:100%; height:100%; object-fit:cover; }
.cart-item-img .img-fallback { width:48px; height:48px; color:var(--muted); }
.cart-item-main {
  display:flex; flex-direction:column; gap:6px;
  min-width:0;
}
.cart-item-main h4 {
  font-family:var(--font-display);
  font-size:1rem; font-weight:700;
  line-height:1.35; margin:0;
}
.cart-item-main .sku { font-size:.78rem; color:var(--muted); }
.cart-item-main .unit { font-size:.78rem; color:var(--muted); }
.cart-qty {
  display:flex; align-items:center; gap:4px;
}
.cart-qty button {
  width:34px; height:34px; border-radius:var(--radius-sm);
  border:1.5px solid var(--border); background:var(--surface);
  cursor:pointer; font-size:1rem; font-weight:700; display:flex; align-items:center; justify-content:center;
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out), border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out); color:var(--fg);
}
.cart-qty button:hover { background:var(--primary-light); border-color:var(--primary); }
.cart-qty span { width:44px; text-align:center; font-weight:700; font-size:.95rem; }
.cart-item-price { font-weight:800; font-size:1rem; color:var(--accent); }
.cart-summary {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:28px; position:sticky; top:86px;
  box-shadow:var(--shadow-sm);
}
.cart-summary h3 { font-size:1.15rem; margin-bottom:20px; font-weight:800; }
.cart-summary-row {
  display:flex; justify-content:space-between;
  padding:9px 0; font-size:.9rem;
}
.cart-summary-row.total {
  border-top:2px solid var(--border);
  margin-top:10px; padding-top:18px;
  font-size:1.15rem; font-weight:900;
  font-family:var(--font-display);
}

/* ── Admin Layout ─────────────────────── */
.admin-layout {
  display:grid; grid-template-columns:250px 1fr;
  height:100vh; overflow:hidden;
}
.admin-sidebar {
  background:var(--surface);
  border-right:1px solid var(--border);
  padding:28px 18px;
  display:flex; flex-direction:column;
  justify-content:space-between;
  height:100vh; position:sticky; top:0;
}
.admin-sidebar-footer {
  border-top:1px solid var(--border);
  padding-top:16px;
  margin-top:auto;
}
.admin-sidebar-footer a {
  display:flex; align-items:center; gap:12px;
  padding:11px 16px; border-radius:var(--radius-sm);
  font-size:.86rem; font-weight:600;
  color:var(--danger); transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out), border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.admin-sidebar-footer a:hover { background:#fef2f2; }
.admin-sidebar h3 {
  font-size:.73rem; text-transform:uppercase;
  letter-spacing:.1em; color:var(--muted);
  margin-bottom:20px; padding:0 14px; font-weight:800;
}
.admin-nav { list-style:none; display:flex; flex-direction:column; gap:4px; }
.admin-nav a {
  display:flex; align-items:center; gap:12px;
  padding:11px 16px; border-radius:var(--radius-sm);
  font-size:.86rem; font-weight:600;
  color:var(--fg); transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out), border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.admin-nav a:hover { background:var(--primary-light); color:var(--primary); }
.admin-nav a.active { background:var(--primary); color:#fff; box-shadow:0 3px 10px rgba(0,83,226,.3); }
.admin-nav .icon { font-size:1.1rem; width:24px; text-align:center; }
.admin-content {
  padding:36px 32px;
  overflow-y:auto; height:100vh;
}
.admin-content-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:28px; flex-wrap:wrap; gap:16px;
}
.admin-content-header h1 { font-size:1.65rem; font-weight:900; letter-spacing:-0.04em; }
.admin-header-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:16px; }
.admin-toolbar { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.admin-toolbar .form-input { width:200px; }
.admin-toolbar .form-select { width:140px; }
@media (max-width:768px) {
  .admin-header-row { flex-wrap:wrap; }
  .admin-toolbar { width:100%; }
  .admin-toolbar .form-input { flex:1; width:auto; }
  .admin-toolbar .form-select { width:auto; min-width:120px; }
}
.col-foto { width:44px; }
.col-sku { width:105px; }
.col-cat { width:130px; }
.col-precio { width:110px; }
.col-min { width:70px; text-align:center; }
.col-stock { width:72px; text-align:center; }
.col-accion { width:64px; text-align:center; }

/* ── Admin hamburger + mobile overlay ─── */
.admin-hamburger {
  display: none;
  align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer; transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out), border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
  flex-shrink: 0;
  position:relative; z-index:1;
}
.admin-hamburger:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
.admin-sidebar-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 150;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(3px);
}
.admin-sidebar-overlay.show { display: block; }
.admin-sidebar-logo {
  padding: 0 14px 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.admin-sidebar-logo img { height: 34px; width: auto; }
.admin-sidebar-scroll { flex: 1; overflow-y: auto; }

@media (max-width:1024px) {
  .admin-hamburger { display: flex; }
  .admin-sidebar {
    position: fixed; left: -280px; top: 0; bottom: 0; z-index: 200;
    width: 260px; transition: left .28s cubic-bezier(.22,1,.36,1);
    height:100vh;
  }
  .admin-sidebar.open { left: 0; }
  .admin-layout { grid-template-columns: 1fr; }
  .admin-content { height:100vh; }
  .table-wrap { overflow: auto hidden; -webkit-overflow-scrolling: touch; }
}
/* ── Table ────────────────────────────── */
.table-wrap {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
table { width:100%; border-collapse:collapse; }
th {
  text-align:left; padding:14px 18px;
  font-size:.73rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted);
  background:var(--bg); border-bottom:1px solid var(--border);
}
td {
  padding:15px 18px; font-size:.875rem;
  border-bottom:1px solid var(--border);
}
tr:last-child td { border-bottom:none; }
tr:hover td { background:#fafbff; }
.cat-cell { display:inline-flex; align-items:center; gap:7px; font-size:.82rem; white-space:nowrap; }
.cat-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.cat-badge { font-size:.72rem; font-weight:600; padding:3px 10px; border-radius:100px; border:1px solid; white-space:nowrap; }
.sku-cell { white-space:nowrap; font-weight:700; font-family:var(--font-display); font-size:.82rem; color:var(--primary); letter-spacing:-.02em; }
.btn-icon-sm { width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; border:1px solid var(--border); background:var(--surface); cursor:pointer; color:var(--fg); transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out), border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out); }
.btn-icon-sm:hover { background:var(--primary-light); color:var(--primary); border-color:var(--primary); }
.btn-icon-danger:hover { background:#fef2f2; color:var(--danger); border-color:var(--danger); }

/* ── Stats ────────────────────────────── */
.stat-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:22px 26px;
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out), border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.stat-card:hover { box-shadow:var(--shadow-md); }
.stat-card .stat-label {
  font-size:.73rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted);
  margin-bottom:8px;
}
.stat-card .stat-value {
  font-family:var(--font-display); font-size:1.9rem;
  font-weight:900; letter-spacing:-0.03em;
}
.stat-card .stat-change {
  font-size:.8rem; margin-top:5px; font-weight:500;
}

/* ── Filter Bar ───────────────────────── */
.filter-bar {
  display:flex; gap:14px; flex-wrap:wrap;
  margin-bottom:28px; align-items:center;
}
.filter-bar .form-input,
.filter-bar .form-select {
  width:auto; min-width:190px;
}
.search-input { flex:1; min-width:250px !important; }

/* ── Step Progress ────────────────────── */
.steps {
  display:flex; justify-content:center; gap:0;
  margin-bottom:44px;
}
.step {
  display:flex; align-items:center;
  font-size:.82rem; font-weight:700; color:var(--muted);
}
.step::before {
  content:''; display:block; width:36px; height:36px;
  border-radius:50%; border:2px solid var(--border);
  margin-right:12px; transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out); font-weight:800;
}
.step.active { color:var(--primary); }
.step.active::before {
  border-color:var(--primary); background:var(--grad-blue);
  box-shadow:0 0 0 5px var(--primary-light);
}
.step.completed { color:var(--success); }
.step.completed::before {
  border-color:var(--success); background:var(--success);
}
.step-arrow { margin:0 24px; color:var(--border); font-size:1.2rem; }

/* ── Modal ────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.4); backdrop-filter:blur(4px);
  display:grid; place-items:center;
  padding:24px;
}
.modal {
  background:var(--surface);
  border-radius:var(--radius-xl);
  padding:36px; max-width:600px; width:100%;
  max-height:90vh; overflow-y:auto;
  box-shadow:var(--shadow-xl);
}
.modal h2 { font-size:1.3rem; font-weight:800; margin-bottom:6px; }
.modal p { color:var(--muted); font-size:.85rem; margin-bottom:24px; }
.modal-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:28px; }

/* ── Status Pills ─────────────────────── */
.status { display:inline-flex; padding:5px 14px; border-radius:20px; font-size:.73rem; font-weight:700; }
.status-recibida { background:#e8f1ff; color:#0053E2; }
.status-revisada { background:#fffbeb; color:#b45309; }
.status-pendiente { background:#fffbeb; color:#b45309; }
.status-cotizada { background:var(--primary-light); color:var(--primary); }
.status-aprobada { background:#ecfdf5; color:var(--success); }
.status-rechazada { background:#fef2f2; color:var(--danger); }
.status-enviada { background:#f0fdf4; color:#15803d; }

/* ── Empty State ──────────────────────── */
.empty-state {
  text-align:center; padding:72px 24px;
}
.empty-state .icon { font-size:3.5rem; margin-bottom:18px; opacity:.25; }
.empty-state h3 { font-size:1.15rem; margin-bottom:8px; }
.empty-state p { color:var(--muted); font-size:.88rem; max-width:380px; margin:0 auto 24px; }

/* ── Footer ───────────────────────────── */
.site-footer {
  text-align:center; padding:44px 28px;
  border-top:1px solid var(--border);
  color:var(--muted); font-size:.82rem;
  background:var(--surface);
}

/* ── Promo banner ─────────────────────── */
.promo-strip {
  background:linear-gradient(135deg,var(--accent),#ff8c3d);
  color:#fff; text-align:center;
  padding:14px 24px; font-weight:700;
  font-size:.85rem; font-family:var(--font-display);
  letter-spacing:.01em;
}
.promo-strip a { color:#fff; text-decoration:underline; font-weight:800; }

/* ── Desktop catalog v2 ──────────────── */
.top-strip {
  background: linear-gradient(90deg, var(--accent), #ff8c3d, var(--accent));
  background-size: 200% auto;
  animation: shine 4s linear infinite;
  color: #fff; text-align: center;
  padding: 10px 24px;
  font-size: .82rem; font-weight: 800;
  font-family: var(--font-display);
  letter-spacing: .02em;
}
.top-strip a { color: #fff; text-decoration: underline; }
@keyframes shine { to { background-position: 200% center; } }

.nav-search {
  position: relative;
  flex: 1;
  max-width: 420px;
  margin: 0 32px;
}
.nav-search input {
  width: 100%;
  padding: 11px 18px 11px 42px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: .9rem;
  color: var(--fg);
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out), border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.nav-search input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-light);
}
.nav-search svg {
  position: absolute;
  left: 15px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--muted);
  pointer-events: none;
}
.nav-actions {
  display: flex; align-items: center; gap: 6px;
}
.nav-icon-btn { background:none; border:none; outline:none; text-decoration:none;
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  color: var(--fg);
  position: relative;
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out), border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.nav-icon-btn:hover { background: var(--primary-light); color: var(--primary); }
.nav-icon-btn.active { background: var(--primary-light); color: var(--primary); }
.nav-icon-btn svg { width: 22px; height: 22px; }

.hero-v2 {
  max-width: var(--max-w);
  margin: 28px auto 0;
  padding: 0 28px;
}
.hero-v2-inner {
  position: relative;
  border-radius: var(--radius-xl);
  background: var(--grad-hero);
  height: 420px;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

/* ── Decorative elements ── */
.hero-deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.hero-deco-1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(255,255,255,.05) 0%, transparent 70%);
  top: -200px; right: -120px;
}
.hero-deco-2 {
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(255,107,0,.08) 0%, transparent 70%);
  bottom: -100px; left: -80px;
}
.hero-deco-3 {
  width: 100px; height: 100px;
  border: 1.5px solid rgba(255,255,255,.06);
  top: 60px; left: 45%;
}
.hero-deco-4 {
  width: 50px; height: 50px;
  background: rgba(255,255,255,.04);
  bottom: 80px; right: 25%;
}

/* ── Dots pattern ── */
.hero-deco-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

.hero-v2-slide {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
  padding: 52px 64px 88px;
  opacity: 0;
  transition: opacity 650ms var(--ease-in-out);
  pointer-events: none;
  z-index: 1;
}
.hero-v2-slide.active { opacity: 1; pointer-events: auto; z-index: 2; }
.hero-v2-slide .hero-v2-text,
.hero-v2-slide .hero-v2-visual {
  opacity:0; transform:translateY(12px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
.hero-v2-slide.active .hero-v2-text,
.hero-v2-slide.active .hero-v2-visual { opacity:1; transform:none; }

.hero-v2-text {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative; z-index: 2;
  padding-right: 40px;
}

/* ── Tag line ── */
.hero-v2-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 14px;
}
.hero-v2-tag::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(255,107,0,.5);
}

/* ── Typography ── */
.hero-v2 h2 {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 16px;
  max-width: 540px;
}
.hero-v2 h2 em {
  font-style: normal;
  background: linear-gradient(135deg, #ff9447 0%, #ff6b00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-v2 p {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255,255,255,.7);
  margin-bottom: 28px;
  max-width: 480px;
  flex-shrink: 0;
}

.hero-v2-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: auto;
}

.hero-v2-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  transition: all .25s ease;
  cursor: pointer;
  border: none;
}
.hero-v2-btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 16px rgba(255,107,0,.35);
}
.hero-v2-btn-primary:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,107,0,.45);
}
.hero-v2-btn-ghost {
  background: rgba(255,255,255,.1);
  color: #fff;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15);
}
.hero-v2-btn-ghost:hover {
  background: rgba(255,255,255,.2);
  transform: translateY(-2px);
}

/* ── Visual / image card ── */
.hero-v2-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.hero-v2-img {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  display: block;
}
.hero-v2-img-card svg {
  width: 96px;
  height: 96px;
  color: rgba(255,255,255,.8);
  position: relative;
  z-index: 1;
}
.hero-v2-glow {
  position: absolute;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ── Dots ── */
.hero-v2-dots {
  position: absolute; bottom: 18px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  z-index: 10;
  pointer-events: none;
}
.hero-v2-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.4);
  cursor: pointer; transition: all .3s cubic-bezier(.4,0,.2,1);
  pointer-events: auto;
}
.hero-v2-dot:hover { background: rgba(255,255,255,.75); transform: scale(1.15); }
.hero-v2-dot.active { background: #fff; width: 28px; border-radius: 6px; }

.hero-v2-text {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative; z-index: 2;
}


.trust-bar {
  max-width: var(--max-w); margin: 0 auto;
  padding: 32px 28px 0;
}
.trust-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.trust-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: var(--shadow-sm);
}
.trust-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--primary-light);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.trust-icon svg { width: 24px; height: 24px; }
.trust-item h4 { font-size: 1rem; font-weight: 800; margin-bottom: 2px; }
.trust-item p { font-size: .82rem; color: var(--muted); line-height: 1.45; }

.cat-icons {
  max-width: var(--max-w); margin: 0 auto;
  padding: 48px 28px 40px;
}
.cat-icons-grid {
  display: grid; grid-template-columns: repeat(6, auto);
  justify-content: center; gap: 80px;
}
.cat-icon-item {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-decoration: none;
  color: var(--fg);
  cursor: pointer;
}
.cat-icon-item img {
  width: 80px; height: 80px; object-fit: contain;
  border-radius: 50%;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.14));
  transition: filter .25s, transform .25s;
}
.cat-icon-item:hover img {
  filter: drop-shadow(0 8px 22px rgba(0,83,226,.35));
  transform: scale(1.05);
}
.cat-icon-item span {
  font-size: .9rem; font-weight: 800; text-align: center;
  line-height: 1.25; max-width: 120px;
}

.product-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
.product-card-v2 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: all .25s;
  cursor: pointer;
  position: relative;
}
.product-card-v2:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}
.pcv-img {
  aspect-ratio: 1 / 1;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.pcv-img img { width:100%; height:100%; object-fit:contain; background:#fff; }
.pcv-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.06) 100%);
  pointer-events: none;
}
.pcv-img::before {
  content: ''; position: absolute; left:0; right:0; bottom:0; height:4px;
  background: var(--cat-accent, #0053E2);
  z-index:2;
  opacity:.7;
}
.pcv-img-icon {
  position: relative; z-index: 1;
  font-size: 5rem;
  filter: drop-shadow(0 8px 20px color-mix(in srgb, var(--icon-shadow, #0053E2) 60%, transparent));
  opacity: .88;
  transition: .3s cubic-bezier(.34,1.56,.64,1);
}
.product-card-v2:hover .pcv-img-icon {
  transform: scale(1.08);
  opacity: 1;
  filter: drop-shadow(0 12px 28px color-mix(in srgb, var(--icon-shadow, #0053E2) 80%, transparent));
}
.pcv-badge {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  padding: 5px 11px; border-radius: 20px;
  background: var(--grad-accent); color: #fff;
  font-size: .68rem; font-weight: 800;
  font-family: var(--font-display);
  letter-spacing: .04em;
  box-shadow: 0 4px 12px rgba(255,107,0,.35);
}
.pcv-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.pcv-cat {
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--accent);
  margin-bottom: 6px;
}
.pcv-brand {
  font-size: .72rem; font-weight: 600; color: var(--muted);
  margin-bottom: 6px;
}
.pcv-title {
  font-family: var(--font-display); font-size: 1.05rem;
  font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.25; margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcv-desc {
  font-size: .82rem; color: var(--muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 14px;
}
.pcv-meta { margin-top: auto; }
.pcv-price {
  font-family: var(--font-display); font-size: 1.25rem;
  font-weight: 900; color: var(--accent); letter-spacing: -0.02em;
}
.pcv-price small { font-size: .75rem; font-weight: 500; color: var(--muted); }
.pcv-min {
  display: inline-flex; margin-top: 6px;
  font-size: .75rem; font-weight: 700; color: var(--primary);
  background: var(--primary-light); padding: 4px 10px; border-radius: 20px;
}
.pcv-actions {
  display: grid; grid-template-columns: 1fr auto;
  gap: 10px; margin-top: 14px;
}
.pcv-actions .btn { padding: 10px 16px; font-size: .85rem; }

.floating-support {
  position: fixed; bottom: 24px; right: 24px; z-index: 90;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 999px;
  background: #25d366; color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: .9rem;
  box-shadow: 0 8px 24px rgba(37,211,102,.35);
  text-decoration: none; transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.floating-support:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(37,211,102,.45); }
.floating-support svg { width: 22px; height: 22px; }

.filter-row {
  display: flex; gap: 14px; align-items: center;
  margin-bottom: 28px; flex-wrap: wrap;
}
.filter-row .search-input { flex: 1; min-width: 260px; }
.filter-row .form-select { width: auto; min-width: 180px; }

@media (max-width: 1024px) {
  .cart-grid { grid-template-columns:1fr; }
  .cart-summary { position:static; margin-top:28px; }
  .cart-item { grid-template-columns:100px 1fr auto auto; gap:18px; }
  .cart-item-actions { grid-column:unset; }

  .hero-v2-slide { grid-template-columns: 1fr; text-align: center; padding: 40px 40px 78px; }
  .hero-v2-inner { height: 380px; }
  .hero-v2-visual { display: flex; justify-content: center; }
  .hero-v2-visual img { max-width: 260px; max-height: 220px; object-fit: contain; }
  .hero-v2 h2 { font-size: 2rem; }
  .hero-v2 p { margin: 0 auto 28px; max-width: 420px; }
  .hero-v2-text { padding-right: 0; align-items: center; }
  .hero-v2-tag { justify-content: center; }
  .hero-v2-actions { justify-content: center; }

  .hero-deco-3, .hero-deco-4, .hero-deco-dots { display: none; }
  .trust-grid { grid-template-columns: 1fr; }
  .cat-icons-grid { grid-template-columns: repeat(6, auto); gap: 60px; }
  .cat-icon-item img { width: 76px; height: 76px; }
  .nav-search { display: none; }
}
@media (max-width: 640px) {
  .hero-v2 { padding: 0 16px; }
  .hero-v2-inner { height: 360px; }
  .hero-v2-slide { padding: 32px 24px 72px; }
  .hero-v2 h2 { font-size: 1.6rem; }
  .hero-v2 p { font-size: .92rem; margin-bottom: 24px; }
  .hero-v2-btn { padding: 12px 22px; font-size: .85rem; }
  .hero-v2-tag { font-size: .72rem; }
  .product-grid-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .pcv-img-icon { font-size: 3rem; }
  .pcv-body { padding: 14px; }
  .pcv-title { font-size: .92rem; }
  .pcv-price { font-size: 1.05rem; }
  .pcv-actions { grid-template-columns: 1fr; }
  .pcv-actions .btn { width: 100%; }
  .floating-support { bottom: 16px; right: 16px; }
}
@media (max-width:768px) {
  .cart-grid { grid-template-columns:1fr; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; }
  .cart-item { grid-template-columns:60px 1fr; gap:12px; }
  .cart-item > :nth-child(3),
  .cart-item > :nth-child(4),
  .cart-item > :nth-child(5) { grid-column:2; }
  .filter-bar { flex-direction:column; }
  .filter-bar .form-input,
  .filter-bar .form-select { width:100%; min-width:unset; }
  .page { padding:24px 16px; }
  .admin-content { padding:24px 16px; }
  .steps { flex-wrap:wrap; gap:4px; justify-content:center; }
  .step-arrow { display:none; }
  .hero { min-height:420px; }
  .hero h1 { font-size:1.8rem; }
  .hero-features { padding-bottom:40px; }
  .cat-icons-grid { grid-template-columns: repeat(6, auto); gap: 32px; }
  .cat-icon-item img { width: 64px; height: 64px; }
  .cat-icon-item span { font-size: .78rem; max-width: 120px; }
}
@media (max-width:640px) {
  .cart-item {
    grid-template-columns:64px 1fr auto;
    grid-template-areas:
      "img main main"
      "img main main"
      "qty qty price"
      "actions actions actions";
    gap:10px;
    padding:14px;
  }
  .cart-item-img { width:64px; height:64px; grid-area:img; }
  .cart-item-main { grid-area:main; }
  .cart-item-main h4 { font-size:.92rem; }
  .cart-item-price { grid-area:price; }
  .cart-item-actions { grid-area:actions; justify-content:flex-start; }
  .cart-qty { grid-area:qty; }
  .cart-item > :nth-child(3),
  .cart-item > :nth-child(4),
  .cart-item > :nth-child(5) { grid-column:unset; }
  .cart-qty span { width:36px; }
  .cart-qty button { width:30px; height:30px; }
  .cart-summary { padding:20px; }
  .cart-summary h3 { font-size:1.05rem; }
  .cart-summary-row { font-size:.85rem; }
  .cart-summary-row.total { font-size:1.05rem; }
  .cart-actions { flex-direction:column; gap:12px; }
  .cart-actions .btn { width:100%; justify-content:center; }
  .step { font-size:.72rem; }
  .step::before { width:28px; height:28px; margin-right:6px; }
  .step-arrow { margin:0 8px; font-size:.9rem; }
  .auth-card { padding:32px 24px; }
}
@media (max-width:480px) {
  .product-grid-v2 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .pcv-body { padding:10px; }
  .pcv-title { font-size:.85rem; }
  .cat-icons { padding: 24px 16px 20px; }
  .cat-icons-grid {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 12px 20px;
  }
  .cat-icon-item { flex: 0 0 auto; min-width: 0; }
  .cat-icon-item img { width: 48px; height: 48px; }
  .cat-icon-item span { font-size: .72rem; max-width: 85px; }
  .pcv-price { font-size:.95rem; }
  .hero-v2-inner { height: 320px; }
  .hero-v2-slide { padding:24px 16px 58px; }
  .hero-v2 h2 { font-size:1.35rem; }
  .hero-v2 p { font-size:.85rem; }
  .hero-v2-btn { padding:10px 16px; font-size:.8rem; }
  .hero-v2-tag { font-size:.68rem; margin-bottom:10px; }
  .page { padding:16px 12px; }
  .admin-content { padding:16px 12px; }
  .nav { padding:0 12px; }
  .nav-logo { font-size:1rem; gap:6px; }
  .nav-logo-icon { width:32px; height:32px; font-size:.9rem; }
  .btn { padding:9px 16px; font-size:.82rem; }
  .btn-sm { padding:5px 12px; font-size:.78rem; }
  .auth-card { padding:28px 18px; border-radius:var(--radius-lg); }
  .screen-grid { padding:0 12px 60px; gap:14px; }
}

/* Mobile search toggle */
.nav-search-mobile-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  color: var(--fg);
  cursor: pointer; transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out), border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
  background: none; border: none;
}
.nav-search-mobile-toggle:hover { background: var(--primary-light); color: var(--primary); }
.nav-search-mobile-toggle svg { width: 22px; height: 22px; }

@media (max-width:1024px) {
  .nav-search-mobile-toggle { display: flex; }
  .nav-search {
    position: absolute;
    top: var(--nav-h); left: 0; right: 0;
    max-width: 100%; margin: 0;
    padding: 12px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    z-index: 99;
    display: none;
  }
  .nav-search.open { display: block; }
  .nav-search input { max-width: 100%; }
}

/* ── Animated gradient bg for product images ── */
@keyframes shimmer {
  0% { background-position:-200% center; }
  100% { background-position:200% center; }
}

/* ── Utilities ────────────────────────── */
.mt-1 { margin-top:8px; }
.mt-2 { margin-top:16px; }
.mt-3 { margin-top:24px; }
.mt-4 { margin-top:32px; }
.mb-1 { margin-bottom:8px; }
.mb-2 { margin-bottom:16px; }
.mb-3 { margin-bottom:24px; }
.text-center { text-align:center; }
.text-muted { color:var(--muted); }
.text-sm { font-size:.85rem; }
.text-xs { font-size:.75rem; }
.flex { display:flex; }
.flex-between { display:flex; justify-content:space-between; align-items:center; }
.gap-1 { gap:8px; }
.gap-2 { gap:16px; }
.gap-3 { gap:24px; }
.w-full { width:100%; }

/* ── Category sections (4 products per section) ── */
.cat-section {
  margin-top: 40px;
}
.cat-section:first-child {
  margin-top: 8px;
}
.cat-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
.cat-section-head h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
}
.cat-section-head p {
  font-size: .92rem;
  color: var(--muted);
  margin: 6px 0 0;
  max-width: 600px;
  line-height: 1.5;
}
.cat-section-head .btn {
  flex-shrink: 0;
}
@media (max-width:768px) {
  .cat-section { margin-top: 32px; }
  .cat-section-head { flex-direction: column; gap: 12px; }
  .cat-section-head p { max-width: 100%; }
}
@media (max-width:480px) {
  .cat-section { margin-top: 28px; }
}

.detail-gallery { display:flex; flex-direction:column; gap:18px; align-items:center; }
.detail-video-poster { width:100%; height:100%; background-size:cover; background-position:center; position:relative; display:flex; align-items:center; justify-content:center; }
.detail-video-poster--src video { max-width:100%; max-height:100%; }
.detail-play { width:64px; height:64px; border-radius:50%; border:none; background:rgba(0,0,0,.55); color:#fff; font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding-left:5px; box-shadow:0 4px 14px rgba(0,0,0,.35); transition:.15s; }
.detail-play:hover { background:rgba(0,0,0,.75); transform:scale(1.05); }
.detail-yt-wrap { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#000; }
.detail-yt-wrap iframe { width:100%; height:100%; border:0; }
.detail-thumb-video { position:relative; padding:0; display:flex; align-items:center; justify-content:center; border:2px solid transparent; background:#fff; color:#fff; }
.detail-thumb-video img { width:100%; height:100%; object-fit:contain; background:#fff; }
.detail-thumb-video span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:14px; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.8); }
.detail-video-poster--src { background:#000; }
.detail-yt-wrap video { width:100%; height:100%; }
.video-lightbox { position:fixed; inset:0; z-index:1200; background:rgba(0,0,0,.88); display:flex; align-items:center; justify-content:center; }
.video-lightbox[hidden] { display:none; }
.video-lightbox-inner { position:relative; max-width:min(92vw, 1200px); }
.video-lightbox-player { position:relative; width:100%; display:flex; align-items:center; justify-content:center; }
.video-lightbox-player img { max-width:92vw; max-height:88vh; object-fit:contain; border-radius:12px; background:#fff; }
.video-lightbox-player iframe.lb-landscape, .video-lightbox-player video.lb-landscape { width:min(92vw, calc(88vh * 16 / 9)); aspect-ratio:16/9; border:0; border-radius:12px; background:#000; }
.video-lightbox-player iframe.lb-portrait, .video-lightbox-player video.lb-portrait { height:min(88vh, calc(92vw * 16 / 9)); width:auto; aspect-ratio:9/16; border:0; border-radius:12px; background:#000; }
.video-lightbox-close { position:absolute; top:-44px; right:0; width:36px; height:36px; border-radius:50%; border:none; background:rgba(255,255,255,.18); color:#fff; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2; }
.video-lightbox-close:hover { background:rgba(255,255,255,.3); }
.video-lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:none; background:rgba(0,0,0,.45); color:#fff; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:5; box-shadow:0 2px 8px rgba(0,0,0,.3); }
.video-lightbox-nav:hover { background:rgba(255,255,255,.35); }
.lb-prev { left:8px; }
.lb-next { right:8px; }
.no-scroll { overflow:hidden; }
.detail-thumbs { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.detail-thumb { width:56px; height:56px; border-radius:8px; object-fit:contain; background:#fff; cursor:pointer; transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out), border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out); }

@media (max-width:768px) {
  .detail-grid { grid-template-columns:1fr; gap:32px; }
  
  .detail-title { font-size:1.5rem; }
  .detail-price { font-size:1.6rem; }
  .detail-thumb { width:64px; height:64px; }
}
@media (max-width:480px) {
  .detail-gallery { gap:12px; }
  
  .detail-img-main .detail-icon-fallback { font-size:3.5rem; }
  .detail-thumb { width:56px; height:56px; }
}
.nav-user-menu { position:relative; }
.nav-user-name { padding:10px 16px; font-weight:600; font-size:.85rem; border-bottom:1px solid var(--border); }
.nav-user-dropdown { position:absolute; top:calc(100% + 8px); right:0; background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-lg); min-width:200px; z-index:200; overflow:hidden; }
.nav-user-dropdown a { display:block; padding:10px 16px; font-size:.85rem; font-weight:600; color:var(--fg); text-decoration:none; transition: background-color 120ms var(--ease-out), color 120ms var(--ease-out), border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out); }
.nav-user-dropdown a:hover { background:var(--primary-light); color:var(--primary); }
.nav-user-dropdown a.u-text-danger { color:var(--danger); }
.nav-user-dropdown a:last-child { border-bottom:none; }

/* ═══ Utilidades (complemento a ── Utilities ──) ═══ */
.u-hidden{display:none !important}
.u-flex-1{flex:1}
.u-inline-flex{display:inline-flex}
.u-center{align-items:center}
.u-between{justify-content:space-between}
.u-col{flex-direction:column}
.u-wrap{flex-wrap:wrap}
.u-mt-5{margin-top:24px}
.u-mb-4{margin-bottom:16px}
.u-mr-1{margin-right:4px}.u-mr-2{margin-right:8px}
.u-text-danger{color:var(--danger)}
.u-text-primary{color:var(--primary)}
.u-text-strong{font-weight:700}
.u-relative{position:relative}
.u-pointer{cursor:pointer}
.u-no-decoration{text-decoration:none}
.u-icon-lg{width:22px;height:22px}
.icon-16{width:16px;height:16px}
.admin-footer{padding:12px 16px;font-size:.72rem;color:var(--muted);text-align:center;border-top:1px solid var(--border);line-height:1.6}

/* ── Admin HeroUI refinements ── */
:root {
  --admin-bg:#f5f7fb;
  --admin-surface:#ffffff;
  --admin-border:#e6e9f2;
  --admin-radius:10px;
  --admin-shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
  --admin-shadow-hover:0 4px 12px rgba(16,24,40,.08);
  --admin-focus:0 0 0 3px rgba(0,83,226,.18);
}

/* Surface + background */
body.admin, .admin-content { background:var(--admin-bg); }
.admin-sidebar { border-right:1px solid var(--admin-border); }

/* Admin nav */
.admin-nav a { color:var(--muted); border-radius:8px; transition:background-color .15s, color .15s; }
.admin-nav a:hover { background:#eef4ff; color:var(--primary); }
.admin-nav a.active { background:var(--primary); color:#fff; box-shadow:none; }
.admin-nav a:focus-visible { outline:none; box-shadow:var(--admin-focus); }

/* Stat cards */
.stat-card {
  border:1px solid var(--admin-border);
  border-radius:var(--admin-radius);
  box-shadow:var(--admin-shadow);
  transition:box-shadow .2s ease, transform .2s ease;
}
.stat-card:hover { box-shadow:var(--admin-shadow-hover); transform:translateY(-1px); }
.stat-card:focus-within { outline:none; box-shadow:var(--admin-shadow-hover), var(--admin-focus); }

/* Buttons */
body.admin .btn {
  border-radius:8px;
  transition:background-color .15s, box-shadow .15s, transform .15s;
}
body.admin .btn:hover { transform:translateY(-1px); }
body.admin .btn:active { transform:scale(.98); }
body.admin .btn:focus-visible { outline:none; box-shadow:var(--admin-focus); }
body.admin .btn:disabled, .btn[disabled] { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
body.admin .btn-primary { background:var(--primary); box-shadow:0 1px 2px rgba(0,83,226,.3); }
body.admin .btn-primary:hover { background:var(--primary-dark); box-shadow:var(--admin-shadow-hover); transform:translateY(-1px); }
body.admin .btn-accent { background:var(--accent); box-shadow:0 1px 2px rgba(255,107,0,.3); }
body.admin .btn-accent:hover { background:var(--accent-dark); box-shadow:var(--admin-shadow-hover); transform:translateY(-1px); }
body.admin .btn-outline { border:1px solid var(--primary); background:transparent; }
body.admin .btn-outline:hover { background:#eef4ff; }
body.admin .btn-ghost { background:transparent; }
body.admin .btn-ghost:hover { background:#eef4ff; color:var(--primary); }
body.admin .btn-danger { background:var(--danger); box-shadow:0 1px 2px rgba(239,68,68,.3); }
body.admin .btn-danger:hover { background:#dc2626; transform:translateY(-1px); }

/* Modal */
body.admin .modal-overlay { background:rgba(16,24,40,.5); }
body.admin .modal {
  border-radius:14px;
  border:1px solid var(--admin-border);
  box-shadow:0 20px 40px rgba(16,24,40,.12);
}
body.admin .modal-actions { display:flex; gap:12px; justify-content:flex-end; flex-wrap:wrap; margin-top:28px; }

/* Tables */
body.admin .table-wrap { overflow-x:auto; }
body.admin th {
  font-size:.75rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); font-weight:600; padding:10px 14px; background:#f8faff;
}
body.admin td { padding:12px 14px; border-bottom:1px solid var(--admin-border); }
body.admin tr:hover td { background:#f8faff; }
body.admin tr:hover { background:#f8faff; }

/* Forms */
body.admin .form-input, body.admin .form-select, body.admin .form-textarea {
  border:1px solid var(--admin-border);
  border-radius:8px;
  padding:10px 12px;
  transition:border-color .15s, box-shadow .15s;
}
body.admin .form-select { padding-right:36px; }
body.admin .form-input:focus, body.admin .form-select:focus, body.admin .form-textarea:focus {
  outline:none; border-color:var(--primary); box-shadow:var(--admin-focus);
}

/* Status pills */
body.admin .status { border-radius:8px; padding:4px 12px; }
body.admin .status-recibida { background:#fff7ed; color:#c2410c; }
body.admin .status-revisada { background:#fffbeb; color:#b45309; }
body.admin .status-pendiente { background:#fffbeb; color:#b45309; }
body.admin .status-cotizada { background:#eef4ff; color:#0053E2; }
body.admin .status-aprobada { background:#ecfdf5; color:#047857; }
body.admin .status-rechazada { background:#fef2f2; color:#dc2626; }
body.admin .status-enviada { background:#f0fdf4; color:#15803d; }
.status-cancelada { background:#fef2f2; color:#b91c1c; }


/* ── Admin Premium (claro) ── */
body.admin .admin-sidebar {
  background:#ffffff;
  border-right:1px solid #e8ecf5;
}
body.admin .admin-sidebar-logo { margin-bottom:20px; }
body.admin .admin-nav a { color:#4b5563; }
body.admin .admin-nav a:hover { background:#eef4ff; color:#0053E2; }
body.admin .admin-nav a.active {
  background:linear-gradient(135deg,#0053E2,#2f6bff);
  color:#fff;
  box-shadow:0 4px 14px rgba(0,83,226,.25);
}
body.admin .admin-sidebar-footer a { color:#6b7280; }
body.admin .admin-sidebar-footer a:hover { color:#0053E2; }
body.admin .admin-footer { color:#9ca3af; }

body.admin .admin-content { background:#f5f7fb; }

body.admin .admin-content-header h1 {
  font-size:1.75rem; font-weight:900; letter-spacing:-0.03em; color:#111827;
}

body.admin .stat-card {
  background:#ffffff;
  border:1px solid #e8ecf5;
  border-radius:var(--radius-lg);
  box-shadow:0 1px 3px rgba(16,24,40,.05);
  transition:transform .15s ease, box-shadow .15s ease;
}
body.admin .stat-card:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(16,24,40,.08);
}
body.admin .stat-card .stat-label { color:#6b7280; }

body.admin .btn-primary {
  background:linear-gradient(135deg,#0053E2,#2f6bff);
  box-shadow:0 2px 8px rgba(0,83,226,.2);
}
body.admin .btn-primary:hover { box-shadow:0 6px 16px rgba(0,83,226,.3); }
body.admin .btn-accent {
  background:linear-gradient(135deg,#ff6b00,#ff8a3c);
  box-shadow:0 2px 8px rgba(255,107,0,.2);
}
body.admin .btn-danger {
  background:linear-gradient(135deg,#dc2626,#ef4444);
  box-shadow:0 2px 8px rgba(239,68,68,.2);
}

body.admin .modal { border:1px solid #e8ecf5; box-shadow:0 24px 60px rgba(16,24,40,.12); }
body.admin th { background:#f0f5ff; }
body.admin tr:hover td { background:#f8faff; }

/* Dashboard: acentos por KPI */
body.admin #dsProducts { color:var(--primary); }
body.admin #dsCategories { color:var(--accent); }
body.admin #dsClients { color:#059669; }
body.admin #dsSellers { color:#0891b2; }
body.admin #dsRecibidas { color:#d97706; }
body.admin #dsRevisadas { color:#7c3aed; }
body.admin #dsCotizadas { color:#059669; }
body.admin #dsCanceladas { color:#dc2626; }
body.admin #dsTotalOrders { color:var(--primary); }
body.admin #dsMonthOrders { color:#0891b2; }
body.admin #dsMonthTotal { color:#059669; }


/* Mobile UX fixes (admin audit) */
@media (max-width:768px) {
  body.admin .admin-toolbar { flex-wrap:wrap; }
  body.admin .admin-toolbar .form-input, body.admin .admin-toolbar .form-select { min-width:0; }
  body.admin th, body.admin td { padding:9px 10px; }
  body.admin td { font-size:.8rem; }
  body.admin .admin-hamburger, body.admin .admin-nav a, body.admin .btn, body.admin .btn-sm { min-height:44px; }
}
@media (max-width:640px) {
  body.admin .modal { padding:24px 20px; }
  body.admin .media-filter-tabs { flex-wrap:wrap; }
  body.admin .media-filter-tabs button { flex:1 1 auto; }
}


/* Mobile admin: tablas apiladas como tarjetas (sin scroll horizontal) */
@media (max-width:768px) {
  body.admin .table-wrap { overflow-x:hidden; }
  body.admin table, body.admin thead, body.admin tbody, body.admin tr, body.admin th, body.admin td { display:block; width:100%; }
  body.admin thead { display:none; }
  body.admin tr { margin-bottom:12px; border:1px solid var(--admin-border); border-radius:10px; background:#fff; box-shadow:0 1px 3px rgba(16,24,40,.06); padding:6px 4px; }
  body.admin td { display:flex; justify-content:space-between; align-items:center; gap:8px; border:none; border-bottom:1px solid var(--admin-border); padding:8px 10px; font-size:.8rem; max-width:none !important; white-space:normal !important; overflow:visible !important; }
  body.admin td::before { content: attr(data-label); font-weight:700; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; flex-shrink:0; }
  body.admin td:last-child { border-bottom:none; }
}

/* Accordion: filas admin colapsadas en mobile (primeras 2 celdas, expandir al tocar) */
@media (max-width:768px) {
  body.admin tr { cursor:pointer; }
  body.admin td:nth-child(n+3) { display:none; }
  body.admin tr.expanded td { display:flex; }
  body.admin tr::after {
    content:"▾";
    position:absolute; right:14px; top:12px;
    font-size:.9rem; color:var(--muted);
    transition:transform .15s;
  }
  body.admin tr.expanded::after { transform:rotate(180deg); }
  body.admin tr { position:relative; padding-right:40px; }
}

/* ═══ Footer oscuro de columnas ═══ */
.hc-footer{color:#fff;background:#09254f;margin-top:48px}
.hc-footer-inner{grid-template-columns:1.35fr 1fr 1fr 1.1fr;gap:50px;padding:56px max(20px,50vw - 570px) 48px;display:grid}
.hc-footer-logo{width:180px;height:auto;margin-bottom:18px;background:#fff;border-radius:8px;padding:6px 10px}
.hc-footer p,.hc-footer a,.hc-footer li{color:#b9c7da;font-size:12px;line-height:1.8;text-decoration:none}
.hc-footer a:hover{color:#fff}
.hc-footer h3{text-transform:uppercase;margin:6px 0 16px;font-size:13px}
.hc-footer ul{gap:8px;margin:0;padding:0;list-style:none;display:grid}
.hc-footer-bottom{border-top:1px solid #ffffff1a}
.hc-footer-bottom-inner{color:#90a4c0;justify-content:space-between;align-items:center;gap:20px;width:min(1180px,100% - 40px);min-height:58px;margin:0 auto;font-size:11px;display:flex}
.site-footer{display:none}
@media (max-width:800px){.hc-footer-inner{grid-template-columns:1fr 1fr;gap:30px}}
@media (max-width:560px){.hc-footer-inner{grid-template-columns:1fr;gap:26px}.hc-footer-bottom-inner{flex-direction:column;align-items:flex-start;padding:16px 0}}

.hc-footer-bottom .hc-heart{color:#e94d5f}
.hc-footer-bottom a{color:#b9c7da;text-decoration:none}
.hc-footer-bottom a:hover{color:#fff}

/* ── Motion & a11y (polish pass) ─────────── */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform:translateY(-1px); }
  .btn-primary:hover, .btn-accent:hover { transform:translateY(-2px); }
  .product-card:hover { transform:translateY(-4px); }
  .screen-card:hover { transform:translateY(-3px); }
}
@media (hover: none) {
  .btn:hover, .btn-primary:hover, .btn-accent:hover,
  .product-card:hover, .screen-card:hover { transform:none; }
}

.btn:focus-visible,
.nav-links a:focus-visible,
.nav-cart:focus-visible,
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
  outline:none; box-shadow:0 0 0 3px rgba(0,83,226,.35);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ── Animaciones (polish pass 2) ─────────── */

/* entrada escalonada de product cards */
@keyframes cardIn {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}

/* modal: overlay fade + card escala desde .96 (nunca desde 0) */
@keyframes overlayIn { from { opacity:0; } to { opacity:1; } }
@keyframes modalIn {
  from { opacity:0; transform:translateY(10px) scale(.96); }
  to   { opacity:1; transform:none; }
}
.modal-overlay { animation: overlayIn 320ms var(--ease-out); }
.modal { animation: modalIn 420ms var(--ease-out); transform-origin:center; }

/* dropdowns origin-aware: escalan desde su trigger */
@keyframes ddIn {
  from { opacity:0; transform:translateY(-4px) scale(.97); }
  to   { opacity:1; transform:none; }
}
.search-dd { transform-origin: top center; }
.search-dd.open { animation: ddIn 280ms var(--ease-out); }
.nav-user-dropdown { transform-origin: top right; }
.nav-user-dropdown:not([hidden]) { animation: ddIn 280ms var(--ease-out); }

/* badge del carrito: pop al agregar */
@keyframes badgeBump {
  0% { transform:scale(1); }
  40% { transform:scale(1.28); }
  100% { transform:scale(1); }
}
.nav-cart-badge.bump { animation: badgeBump 450ms var(--ease-out); }

/* imagen de producto: zoom sutil en hover */
.product-card-img img { transition: transform 300ms var(--ease-out); }
.product-card:hover .product-card-img img { transform:scale(1.04); }

/* ── Entrada de página (home) ────────────── */
@keyframes heroRise {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:none; }
}
.hero-v2 .hero-v2-tag     { animation: heroRise 600ms var(--ease-out)  80ms backwards; }
.hero-v2 .hero-v2-text h2 { animation: heroRise 600ms var(--ease-out) 160ms backwards; }
.hero-v2 .hero-v2-text p  { animation: heroRise 600ms var(--ease-out) 240ms backwards; }
.hero-v2 .hero-v2-actions { animation: heroRise 600ms var(--ease-out) 320ms backwards; }
.hero-v2 .hero-v2-visual  { animation: heroRise 650ms var(--ease-out) 260ms backwards; }

/* scroll reveal: contenedores marcados por JS (sin JS, todo visible) */
@keyframes revealIn {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:none; }
}
.reveal-children > * { opacity:0; }
.reveal-children[data-visible] > * {
  opacity:1;
  animation: revealIn 550ms var(--ease-out) backwards;
}
.reveal-children[data-visible] > *:nth-child(2)  { animation-delay: 50ms; }
.reveal-children[data-visible] > *:nth-child(3)  { animation-delay:100ms; }
.reveal-children[data-visible] > *:nth-child(4)  { animation-delay:150ms; }
.reveal-children[data-visible] > *:nth-child(5)  { animation-delay:200ms; }
.reveal-children[data-visible] > *:nth-child(6)  { animation-delay:250ms; }
.reveal-children[data-visible] > *:nth-child(7)  { animation-delay:300ms; }
.reveal-children[data-visible] > *:nth-child(8)  { animation-delay:350ms; }
.reveal-children[data-visible] > *:nth-child(n+9){ animation-delay:350ms; }

/* botón flotante de soporte: entra tarde, con calma */
.floating-support { animation: revealIn 420ms var(--ease-out) 1100ms backwards; }

/* reveal por card: fuera del viewport espera al scroll */
.rv { opacity:0; }
.rv.rv-in { animation: revealIn 560ms var(--ease-out) both; }

/* ── Entrada página detalle (al renderizar producto) ── */
.detail-grid.loaded .detail-gallery  { animation: heroRise 600ms var(--ease-out) backwards; }
.detail-grid.loaded #detailCategory  { animation: heroRise 560ms var(--ease-out)  90ms backwards; }
.detail-grid.loaded .detail-title    { animation: heroRise 600ms var(--ease-out) 160ms backwards; }
.detail-grid.loaded .detail-sku      { animation: heroRise 560ms var(--ease-out) 220ms backwards; }
.detail-grid.loaded .detail-price    { animation: heroRise 600ms var(--ease-out) 290ms backwards; }
.detail-grid.loaded .detail-desc     { animation: heroRise 600ms var(--ease-out) 360ms backwards; }
.detail-grid.loaded .detail-specs    { animation: heroRise 600ms var(--ease-out) 430ms backwards; }
.detail-grid.loaded #variantSelectors{ animation: heroRise 560ms var(--ease-out) 470ms backwards; }
.detail-grid.loaded #qtyRow          { animation: heroRise 560ms var(--ease-out) 520ms backwards; }
.detail-grid.loaded .flex.gap-2      { animation: heroRise 600ms var(--ease-out) 570ms backwards; }
.detail-grid.loaded .detail-thumbs img { animation: heroRise 500ms var(--ease-out) backwards; }
.detail-grid.loaded .detail-thumbs img:nth-child(2){ animation-delay: 90ms; }
.detail-grid.loaded .detail-thumbs img:nth-child(3){ animation-delay:180ms; }
.detail-grid.loaded .detail-thumbs img:nth-child(4){ animation-delay:270ms; }
.detail-grid.loaded .detail-thumbs img:nth-child(5){ animation-delay:360ms; }
.detail-grid.loaded .detail-thumbs img:nth-child(n+6){ animation-delay:300ms; }

/* ── Secciones de conversión (home) ───────── */
@media (max-width:860px){
    .home-trust-inner .home-trust-metrics{grid-template-columns:1fr !important;}
}
@media (max-width:640px){
  .home-trust-inner > div:nth-child(4){grid-template-columns:1fr !important;}
  .home-trust-inner{padding:24px 18px !important;}
  }

/* ── Pulish Emil: nuevas secciones de conversión ── */
@media (hover:hover) and (pointer:fine){
    .home-trust-inner:hover{ border-color:#c9d8f5; }
}
#homeVendorWa{
  transition: transform 160ms var(--ease-out), filter 160ms var(--ease-out);
}
#homeVendorWa:active{ transform:scale(.97); }
#homeVendorWa:hover{ filter:brightness(1.06); }

/* ── Skeleton loaders (mientras carga el contenido async) ── */
.skel{
  background:linear-gradient(90deg,#eef1f6 25%,#f7f9fc 50%,#eef1f6 75%);
  background-size:200% 100%;
  animation:shimmer 1.2s linear infinite;
  border-radius:8px;
}
.skel-circle{border-radius:99px;}
.skel-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px;}
.skel-line{height:12px;margin-bottom:8px;}
.skel-line.w60{width:60%;} .skel-line.w40{width:40%;} .skel-line.w80{width:80%;}
/* detalle: skeleton visible hasta que el producto renderiza */
.detail-skel{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.detail-grid.loaded .detail-skel{display:none;}
@media (max-width:860px){ .detail-skel{grid-template-columns:1fr;} }

/* related: placeholder sin imagen */
.related-fallback{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#e8effc,#d5e3fa);display:inline-block;}

/* ── Rail de relacionados: cards compactas, scroll horizontal ── */
.related-rail{
  display:flex; gap:12px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  padding-bottom:6px;
  scrollbar-width:none;
}
.related-rail::-webkit-scrollbar{display:none;}
.related-rail .product-card-v2{
  flex:0 0 180px; min-width:180px; max-width:180px;
  scroll-snap-align:start; cursor:pointer;
}
.related-rail .pcv-title{font-size:.82rem; line-height:1.35;}
.related-rail .pcv-brand,.related-rail .pcv-desc{display:none;}
.related-rail .pcv-body{padding:14px;}
.related-rail .pcv-actions{grid-template-columns:1fr;}
.related-rail .pcv-actions .btn{width:100%;padding:8px 10px;font-size:.78rem;}
.related-rail .pcv-price{font-size:.95rem;}
.related-rail .pcv-min{font-size:.68rem;}
@media (max-width:640px){
  /* exactamente 2 visibles: mitad del rail menos medio gap */
  .related-rail .product-card-v2{flex-basis:calc(50% - 6px); min-width:calc(50% - 6px); max-width:calc(50% - 6px);}
}

/* flechas del rail de relacionados */
.rail-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:99px;
  background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--shadow-md); color:var(--fg);
  cursor:pointer; display:none; align-items:center; justify-content:center;
  z-index:2;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.rail-prev{left:-15px;} .rail-next{right:-15px;}
#relatedWrap.has-scroll .rail-arrow{display:flex;}
.rail-arrow:hover{box-shadow:var(--shadow-lg);}
.rail-arrow:active{transform:translateY(-50%) scale(.93); transition-duration:80ms;}
@media (max-width:640px){ .rail-arrow{width:32px;height:32px;} .rail-prev{left:-8px;} .rail-next{right:-8px;} }
/* fix: el rail no debe ensanchar al contenedor grid */
#relatedWrap{min-width:0;}
#relatedWrap .related-rail{max-width:100%;}
/* fix: .page como item flex de body — permitir shrink bajo su min-content */
.page{min-width:0}
/* fix densidad rail: banda 1240-1335px — evitar sliver de la 7ª card (agente UX) */
@media (min-width: 1025px) and (max-width: 1335px){
  .related-rail .product-card-v2{ flex-basis:172px; min-width:172px; max-width:172px; }
}

/* ── Pulido admin (Operate: funcional, sutil) ── */
tbody tr td{ transition: background-color 150ms var(--ease-out); }
.btn-icon-sm:focus-visible, .btn-icon-danger:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(0,83,226,.3);
}
.stat-card{ transition: box-shadow 200ms var(--ease-out), transform 200ms var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  .stat-card:hover{ transform:translateY(-2px); }
}
body.admin .skel{ background:linear-gradient(90deg,#edf0f6 25%,#f6f8fc 50%,#edf0f6 75%); background-size:200% 100%; }
/* pulir móvil admin: colapsado muestra Foto+Nombre+Precio (no solo SKU) */
@media (max-width:768px){
  body.admin tr:not(.expanded) td:nth-child(2){ display:none; }
  body.admin tr:not(.expanded) td:nth-child(3){ display:flex; flex:1; min-width:0; }
  body.admin tr:not(.expanded) td:nth-child(3)::before{ content:none; }
  body.admin tr:not(.expanded) td:nth-child(5){ display:flex; }
  body.admin tr:not(.expanded) td:nth-child(5)::before{ content:none; }
  body.admin tr:not(.expanded) td:nth-child(5){ font-weight:800; color:var(--primary); white-space:nowrap; }
}

/* ═══ Pase de diseño (taste + high-end + impeccable + emil) ═══ */

/* topbar navy — naranja solo quirúrgico */
.top-strip{
  background:linear-gradient(90deg,#001a4d,#002060 55%,#001a4d);
  animation:none; color:#c7d6f0;
}
.top-strip a{ color:#ff9a4d !important; font-weight:700; }
.top-strip strong, .top-strip b{ color:#fff; }

/* hero: título máx 2 líneas */
.hero-v2 h2{
  font-size:clamp(1.5rem, 1vw + 1.1rem, 1.9rem);
  line-height:1.18; letter-spacing:-.02em;
}

/* mosaico 2×2 de fotos reales */
.hero-v2-mosaic{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hv-cell{ border-radius:14px; overflow:hidden; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); min-height:110px; }
.hv-cell img{ width:100%; height:100%; object-fit:cover; display:block; }

}

/* respiración de secciones */
.cat-icons{ padding:64px 28px 52px; }
.cat-section{ margin-top:56px; }
.cat-section:first-child{ margin-top:12px; }
.cat-section-head h3{ font-size:1.5rem; letter-spacing:-.02em; }

/* reveals con blur premium */
@keyframes revealIn{
  from{ opacity:0; transform:translateY(16px); filter:blur(6px); }
  to{ opacity:1; transform:translateY(0); filter:blur(0); }
}
@keyframes heroRise{
  from{ opacity:0; transform:translateY(14px); filter:blur(5px); }
  to{ opacity:1; transform:none; filter:blur(0); }
}

/* números tabulares en precios */
.pcv-price, .detail-price{ font-variant-numeric:tabular-nums; }

/* ═══ Admin ═══ */
body.admin h1{ font-size:1.9rem; letter-spacing:-.03em; }
body.admin h2{ font-size:1.3rem; letter-spacing:-.02em; }
body.admin .sku-cell, body.admin td[data-label="Precio base"], body.admin .stat-value{ font-variant-numeric:tabular-nums; }
@media (max-width:768px){
  body.admin tr.expanded td{ animation:cellIn 320ms var(--ease-out); }
  body.admin tr:active td{ background:#eef4ff; }
}
@keyframes cellIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
/* trust band: entrada escalonada por logo y por métrica (visible de verdad) */
.home-trust-inner[data-visible] #trustLogos > *,
.home-trust-inner[data-visible] #trustMetrics > *{
  animation: revealIn 520ms var(--ease-out) backwards;
}
.home-trust-inner[data-visible] #trustLogos > *:nth-child(1),
.home-trust-inner[data-visible] #trustMetrics > *:nth-child(1){ animation-delay:120ms; }
.home-trust-inner[data-visible] #trustLogos > *:nth-child(2),
.home-trust-inner[data-visible] #trustMetrics > *:nth-child(2){ animation-delay:200ms; }
.home-trust-inner[data-visible] #trustLogos > *:nth-child(3),
.home-trust-inner[data-visible] #trustMetrics > *:nth-child(3){ animation-delay:280ms; }
.home-trust-inner[data-visible] #trustLogos > *:nth-child(4),
.home-trust-inner[data-visible] #trustMetrics > *:nth-child(4){ animation-delay:360ms; }
.home-trust-inner[data-visible] #trustLogos > *:nth-child(n+5),
.home-trust-inner[data-visible] #trustMetrics > *:nth-child(n+5){ animation-delay:440ms; }

/* ── Filtros compartidos (categorias + buscar) ── */
.cat-layout{display:grid;grid-template-columns:250px 1fr;gap:26px;align-items:start}
.cat-sidebar{position:sticky;top:70px;background:#fff;border:1px solid var(--border,#e5e9f0);border-radius:14px;padding:18px}
.cat-sidebar h3{font-size:.85rem;font-weight:800;color:#0a1628;margin:0 0 10px;letter-spacing:-.2px}
.cat-side-list{display:flex;flex-direction:column;gap:2px;margin-bottom:4px}
.cat-side-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:10px;font-size:.85rem;font-weight:600;color:#334155;cursor:pointer;text-decoration:none;transition:.12s}
.cat-side-item:hover{background:#eaf1ff;color:#0053E2}
.cat-side-item.active{background:#0053E2;color:#fff}
.cat-side-item .cnt{font-size:.72rem;opacity:.7}
.cat-side-sub{display:flex;flex-direction:column;gap:2px;padding:2px 0 10px 12px}
.cat-side-sub .cat-side-item{font-size:.8rem;font-weight:500}
.cat-side-div{height:1px;background:var(--border,#e5e9f0);margin:12px 0 14px}
.cat-sort{width:100%}
.tgl-stock{display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;cursor:pointer;color:#0a1628}
.tgl-stock input{accent-color:#0053E2}
.cat-node{margin-bottom:2px}
.cat-children{display:flex;flex-direction:column;gap:2px;padding:2px 0 6px 14px}
.cat-child{font-size:.78rem;font-weight:500;padding:6px 10px;color:#475569}
.cat-child.active{background:#0053E2;color:#fff}
.cat-main{min-width:0}
.cat-head{display:flex;align-items:center;justify-content:space-between;margin:6px 0 16px}
.cat-count{font-size:.85rem;color:var(--muted,#667)}
#catGrid,#resultsGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;padding-bottom:40px}
.cat-empty{text-align:center;padding:60px 16px}
.cat-empty .btn{margin:4px}
.cat-topbar{display:none}
.cat-drawer{display:none}
.card-skel{background:#fff;border:1px solid #e5e9f0;border-radius:14px;overflow:hidden}
.card-skel .sk{background:linear-gradient(90deg,#f1f5f9 25%,#e8edf4 50%,#f1f5f9 75%);background-size:200% 100%;animation:skSh 1.2s infinite}
@keyframes skSh{to{background-position:-200% 0}}
@media(max-width:860px){.cat-layout{grid-template-columns:1fr}.cat-sidebar{display:none}.cat-topbar{position:sticky;top:0;z-index:110;display:flex;align-items:center;gap:10px;background:#fff;padding:10px 12px;border-bottom:1px solid #e5e9f0;box-shadow:0 2px 8px rgba(9,16,28,.10)}.cat-fbtn{position:relative;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;border:1.5px solid #0053E2;background:#fff;color:#0053E2;font-size:.82rem;font-weight:800;cursor:pointer}.cat-fbtn-count{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;border-radius:9px;background:#0053E2;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}.cat-drawer{display:block}.cat-drawer-scrim{position:fixed;inset:0;background:rgba(9,16,28,.45);opacity:0;pointer-events:none;transition:opacity .25s;z-index:120}.cat-drawer.is-open .cat-drawer-scrim{opacity:1;pointer-events:auto}.cat-drawer-panel{position:fixed;top:0;right:0;bottom:0;width:min(85vw,360px);background:#fff;z-index:121;transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;visibility:hidden}.cat-drawer.is-open .cat-drawer-panel{transform:translateX(0);visibility:visible}.cat-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid #e5e9f0}.cat-drawer-head h2{font-size:1rem;font-weight:800;margin:0}.cat-drawer-close{width:32px;height:32px;border-radius:50%;border:none;background:#f1f5f9;color:#0a1628;font-size:16px;cursor:pointer}.cat-drawer-body{padding:16px;overflow-y:auto;flex:1}.cat-drawer-body h3{font-size:.82rem;font-weight:800;margin:14px 0 8px}.cat-drawer-foot{display:flex;gap:8px;padding:12px 16px;border-top:1px solid #e5e9f0}.cat-drawer-foot .btn{flex:1}.cat-drawer .cat-side-sub{padding-left:0}.cat-drawer .cat-side-item{justify-content:flex-start}.cat-drawer .cat-side-item .cnt{margin-left:auto}.tgl-stock{margin:14px 0}.cat-sort{width:100%}#catGrid,#resultsGrid{grid-template-columns:repeat(2,1fr);gap:12px}.cat-fbtn-current{font-size:.82rem;font-weight:700;color:#0a1628;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.card-skel .sk{animation:none}.cat-drawer-scrim,.cat-drawer-panel{transition:none}}

/* ── Detalle producto ── */
.detail-crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.82rem;color:var(--muted);margin-bottom:22px}
.detail-crumbs a{color:var(--muted);text-decoration:none;font-weight:600}
.detail-crumbs a:hover{color:var(--primary)}
.detail-crumbs .crumb-sep{color:#c2c9d4;pointer-events:none}
.detail-crumbs .crumb-current{color:#0a1628;font-weight:700;max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detail-image img { width: 100%; height: 100%; object-fit: cover; }
.detail-img-main { flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; min-height:0; }
.detail-img-main img { max-width:100%; max-height:100%; object-fit:contain; opacity:0; transition:opacity 420ms var(--ease-out); }
.detail-img-main img.img-ready { opacity:1; }
.detail-thumbs { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.detail-thumb { width:56px; height:56px; border-radius:8px; object-fit:contain; background:#fff; cursor:pointer; border:2px solid transparent; transition:.15s; }
.detail-thumb:hover { border-color:var(--primary); opacity:.8; }
.detail-thumb.active { border-color:var(--accent); }
.detail-img-main { position:relative; }
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,.92);box-shadow:0 2px 10px rgba(0,0,0,.18);color:var(--primary);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;transition:.15s}
.gal-nav:hover{background:var(--primary);color:#fff}
.gal-prev{left:10px}
.gal-next{right:10px}
#detailImgWrap { display:flex; flex-direction:column; }
#detailMainWrap { width:100%; }
/* ── Buscar ── */
.buscar-hero{max-width:760px;margin:26px auto 6px;padding:0 16px}
.buscar-hero h1{font-size:1.9rem;font-weight:900;letter-spacing:-.6px;margin:0 0 6px}
.buscar-hero p{color:var(--muted,#64748b);font-size:.9rem;margin:0 0 14px}
.buscar-prompt,.buscar-null{max-width:760px;margin:30px auto;padding:0 16px;text-align:center}
.buscar-null{display:none}
.pop-terms{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pop-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:18px 0}
.pop-cat{display:flex;align-items:center;gap:10px;padding:14px;border:1px solid #e5e9f0;border-radius:12px;background:#fff;text-decoration:none;color:#0a1628;font-weight:700;font-size:.85rem;transition:.15s}
.pop-cat:hover{border-color:#0053E2;color:#0053E2}
.search-hit{background:#fff3bf;color:#0a1628;font-weight:700;padding:0 2px;border-radius:3px}
.bchip{flex:0 0 auto;padding:7px 14px;border-radius:99px;border:1.5px solid #d7dee9;background:#fff;color:#0a1628;font-size:.8rem;font-weight:700;cursor:pointer;white-space:nowrap}
.bchip.active{background:#0053E2;border-color:#0053E2;color:#fff}

/* ── Sticky footer (páginas con layout) ── */
body.prod-page,body.home-page,body.cat-page,body.buscar-page{display:flex;flex-direction:column;min-height:100vh}
body.prod-page > .page,body.home-page > .page,body.cat-page > .page,body.buscar-page > .page{flex:1;width:100%}
.site-footer,.hc-footer{flex-shrink:0}
.hero-v2{width:100%}

/* ── Browser surfaces themed (craft floor: focus, selection, caret, scrollbar) ── */
::selection{background:#0053E2;color:#fff}
input,textarea,select{caret-color:#0053E2}
:focus-visible{outline:2px solid #0053E2;outline-offset:2px}
.form-input:focus-visible,.form-select:focus-visible{outline:2px solid #0053E2;outline-offset:0}
*{scrollbar-width:thin;scrollbar-color:#c7d2e2 #f1f5f9}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:#f1f5f9}
*::-webkit-scrollbar-thumb{background:#c7d2e2;border-radius:5px;border:2px solid #f1f5f9}
*::-webkit-scrollbar-thumb:hover{background:#aab8cf}