/* =====================================================================
   CatalogoCode — Design System v2
   Bolder, more vibrant. Dark sidebar, saturated brand colors,
   stronger depth, modern SaaS feel (Linear / Vercel / Stripe inspired).
   ===================================================================== */

:root {
  /* Surfaces */
  --bg-primary:        #ffffff;
  --bg-secondary:      #f8fafc;
  --bg-tertiary:       #f1f5f9;
  --bg-card:           #ffffff;
  --bg-app:            #f4f6fb;
  --bg-gradient-hero:  linear-gradient(135deg, #1e3a8a 0%, #0f766e 100%);
  --bg-gradient-soft:  linear-gradient(135deg, #eef2ff 0%, #ecfdf5 100%);

  /* Brand — saturated and bold */
  --color-primary:        #2563eb;
  --color-primary-dark:   #1e40af;
  --color-primary-darker: #1e3a8a;
  --color-primary-light:  #dbeafe;
  --color-secondary:      #059669;
  --color-secondary-dark: #047857;
  --color-secondary-light:#d1fae5;
  --color-accent:         #6366f1;
  --color-accent-dark:    #4f46e5;

  /* Dark sidebar */
  --sidebar-bg:        #0f172a;
  --sidebar-bg-active: #1e293b;
  --sidebar-text:      #cbd5e1;
  --sidebar-text-muted:#64748b;
  --sidebar-text-active:#ffffff;
  --sidebar-border:    #1e293b;

  /* Text */
  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;
  --text-white:     #ffffff;

  /* Lines + shadows */
  --border-color: #e2e8f0;
  --border-strong:#cbd5e1;
  --shadow-sm:    0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04);
  --shadow-md:    0 4px 6px -1px rgba(15,23,42,0.08), 0 2px 4px -2px rgba(15,23,42,0.06);
  --shadow-lg:    0 10px 25px -5px rgba(15,23,42,0.12), 0 8px 10px -6px rgba(15,23,42,0.08);
  --shadow-xl:    0 25px 50px -12px rgba(15,23,42,0.25);
  --shadow-card:  0 1px 3px rgba(15,23,42,0.05), 0 1px 2px rgba(15,23,42,0.03);
  --shadow-glow-blue: 0 8px 24px rgba(37,99,235,0.30);
  --shadow-glow-green:0 8px 24px rgba(5,150,105,0.30);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Storefront accent (overridden inline by store.accent_color) */
  --accent:      #2563eb;
  --accent-dark: #1e40af;

  /* Layout */
  --container-max: 1200px;
  --sidebar-w:     260px;
  --header-h:      68px;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
html,body { margin: 0; padding: 0; overflow-x: clip; width: 100%; position: relative; }
body {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img,svg { max-width: 100%; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; margin: 0; }
table { width: 100%; border-collapse: collapse; }

.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
.muted     { color: var(--text-muted); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { color: var(--text-primary); font-weight: 700; line-height: 1.15; margin: 0 0 14px; letter-spacing: -0.02em; }
h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; }
h2 { font-size: clamp(22px, 3vw, 30px); }
h3 { font-size: 22px; }
small { font-size: 13px; }
.text-gradient {
  background: linear-gradient(90deg, #2563eb 0%, #6366f1 50%, #059669 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border: none; border-radius: var(--radius-md);
  font-weight: 600; font-size: 14px; line-height: 1;
  cursor: pointer; text-decoration: none;
  transition: all .18s cubic-bezier(.4,0,.2,1);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn--sm  { padding: 8px 14px; font-size: 13px; border-radius: 8px; }
.btn--lg  { padding: 14px 32px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--pill { border-radius: var(--radius-pill); }

.btn--primary {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  color: #fff;
  box-shadow: var(--shadow-glow-blue), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(37,99,235,0.45), inset 0 1px 0 rgba(255,255,255,0.15); }

.btn--green {
  background: linear-gradient(135deg, #10b981 0%, #047857 100%);
  color: #fff;
  box-shadow: var(--shadow-glow-green), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn--green:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(5,150,105,0.45), inset 0 1px 0 rgba(255,255,255,0.15); }

.btn--outline {
  background: #fff;
  border: 1.5px solid var(--border-strong);
  color: var(--text-primary);
}
.btn--outline:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); }

.btn--ghost {
  background: transparent; color: var(--text-secondary);
  border: 1px solid transparent;
}
.btn--ghost:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.btn--ghost-light { background: rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.35); }
.btn--ghost-light:hover { background: rgba(255,255,255,.25); }

.btn--accent {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn--accent:hover { transform: translateY(-1px); }

.btn--whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(37,211,102,0.40), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid transparent;
}
.badge--blue   { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.badge--green  { background: #d1fae5; color: #047857; border-color: #a7f3d0; }
.badge--orange { background: #ffedd5; color: #c2410c; border-color: #fed7aa; }
.badge--red    { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.badge--purple { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.badge--accent { background: color-mix(in srgb, var(--accent) 15%, white); color: var(--accent); }

/* ---------- Cards ---------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 24px;
  margin-bottom: 20px;
}
.card h2 { font-size: 18px; margin-bottom: 16px; }

/* ---------- Inputs / Forms ---------- */
.form { display: grid; gap: 16px; }
.form--inline { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.form--two-col { grid-template-columns: 1fr 1fr; }
.form__col-2 { grid-column: span 2; }
.form__actions { display: flex; gap: 12px; margin-top: 8px; }

.form label,
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-primary); font-weight: 600; }
.form__check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; color: var(--text-secondary); }

input, select, textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  transition: all .15s ease;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
input[type="color"] { padding: 4px; height: 44px; cursor: pointer; }
textarea { resize: vertical; min-height: 88px; line-height: 1.5; }

/* Prevenir zoom automático en iOS al hacer foco en inputs (requiere font-size >= 16px) */
@media (max-width: 880px) {
  input, select, textarea { font-size: 16px !important; }
}

@media (max-width: 720px) {
  .form--two-col { grid-template-columns: 1fr; }
  .form__col-2 { grid-column: auto; }
}

/* Switch toggle */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span {
  position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px;
  transition: background .2s;
}
.switch span::before {
  content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; transition: transform .2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.switch input:checked + span { background: var(--color-secondary); }
.switch input:checked + span::before { transform: translateX(18px); }

/* ---------- Flash + impersonate banner ---------- */
.flash {
  padding: 12px 18px; margin: 12px 0; border-radius: var(--radius-md);
  font-size: 14px; font-weight: 500; border-left: 4px solid;
}
.flash--success { background: #ecfdf5; color: #065f46; border-color: #10b981; }
.flash--error   { background: #fef2f2; color: #991b1b; border-color: #ef4444; }
.flash--info    { background: #eff6ff; color: #1e40af; border-color: #3b82f6; }

.impersonate-bar {
  background: linear-gradient(135deg, #6366f1, #4338ca);
  color: #fff; padding: 10px 16px; display: flex; justify-content: center;
  gap: 12px; align-items: center; font-size: 14px;
}
.impersonate-bar form button { padding: 4px 12px; }

/* ---------- Navbar (public landing) ---------- */
.navbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(226,232,240,0.6);
}
.navbar__inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; gap: 24px; }
.navbar__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: var(--text-primary); font-size: 16px; }
.navbar__brand--light { color: #fff; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, #2563eb, #6366f1);
  color: #fff; font-size: 16px; font-weight: 700;
}
.brand-mark--admin { background: linear-gradient(135deg, #6366f1, #4338ca); }

.navbar__links { display: flex; gap: 28px; }
.navbar__links a { color: var(--text-secondary); font-weight: 500; font-size: 14px; }
.navbar__links a:hover, .navbar__links a.is-active { color: var(--color-primary); }
.navbar__cta { display: flex; gap: 10px; }

/* Hamburger button */
.navbar__burger {
  display: none; background: none; border: none; cursor: pointer;
  width: 32px; height: 24px; position: relative; padding: 0;
}
.navbar__burger span {
  display: block; width: 100%; height: 2.5px; background: var(--text-primary);
  border-radius: 2px; position: absolute; left: 0;
  transition: all .3s ease;
}
.navbar__burger span:nth-child(1) { top: 0; }
.navbar__burger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.navbar__burger span:nth-child(3) { bottom: 0; }
.navbar__burger.is-open span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.navbar__burger.is-open span:nth-child(2) { opacity: 0; }
.navbar__burger.is-open span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

/* Mobile menu overlay */
.navbar__mobile {
  display: none; flex-direction: column; gap: 4px;
  background: #fff; border-top: 1px solid var(--border-color);
  padding: 16px 24px 24px; box-shadow: var(--shadow-lg);
}
.navbar__mobile.is-open { display: flex; }
.navbar__mobile a:not(.btn) {
  color: var(--text-primary); font-weight: 600; font-size: 16px;
  padding: 12px 0; border-bottom: 1px solid #f1f5f9;
}
.navbar__mobile hr { border: none; border-top: 1px solid var(--border-color); margin: 8px 0; }
.navbar__mobile .btn { margin-top: 4px; text-align: center; }

@media (max-width: 880px) {
  .navbar__links { display: none; }
  .navbar__cta { display: none; }
  .navbar__burger { display: block; }
}

/* ---------- Hero (landing + directory) ---------- */
.hero, .dir-hero {
  position: relative; overflow: hidden;
  background: var(--bg-gradient-soft);
  padding: 90px 0 80px;
}
.hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; width: 100%; }
.hero__badge { margin-bottom: 4px; }
.hero__title { font-size: clamp(36px, 6vw, 64px); line-height: 1.05; font-weight: 800; }
.hero__subtitle { font-size: 19px; color: var(--text-secondary); max-width: 640px; line-height: 1.6; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.hero__blur {
  position: absolute; width: 480px; height: 480px; border-radius: 50%;
  filter: blur(100px); z-index: 0; opacity: .55;
}
.hero__blur--blue  { top: -160px; left: -120px; background: #60a5fa; }
.hero__blur--green { bottom: -200px; right: -120px; background: #34d399; }
.hero__inner > * { position: relative; z-index: 1; }

.hero__mockup { margin-top: 32px; max-width: 480px; width: 100%; position: relative; z-index: 1; }

/* =====================================================================
   Showcase — Real stores carousel (fully responsive)
   ===================================================================== */
.showcase {
  margin-top: 32px;
  width: 100%;
  max-width: 100%;
  position: relative;
  z-index: 1;
  text-align: center;
}
.showcase__label {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,0.7);
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 16px;
  max-width: calc(100% - 32px);
}
.showcase__label strong { color: var(--color-primary); white-space: nowrap; }
.showcase__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #10b981; flex-shrink: 0;
  animation: pulse-dot 1.5s ease-in-out infinite;
}

/* Contained track — stays within hero bounds, not full-bleed */
.showcase__track-wrap {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
  padding: 12px 0;
  border-radius: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.showcase__track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: showcase-slide 45s linear infinite;
  will-change: transform;
  padding: 0 12px;
}
.showcase__track:hover { animation-play-state: paused; }
@keyframes showcase-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.showcase__store {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 8px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(15,23,42,0.06);
  color: var(--text-primary);
  text-decoration: none;
  flex-shrink: 0;
  transition: all .2s;
  --sc: #2563eb;
}
.showcase__store:hover {
  transform: translateY(-3px);
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(15,23,42,0.12), 0 0 0 2px var(--sc);
  border-color: var(--sc);
}
.showcase__logo {
  width: 44px; height: 44px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  background: var(--sc);
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.showcase__logo img { width: 100%; height: 100%; object-fit: cover; }
.showcase__initial { color: #fff; font-weight: 800; font-size: 18px; }
.showcase__info { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; }
.showcase__info strong {
  font-size: 13px; font-weight: 700; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 140px;
  line-height: 1.2;
}
.showcase__info small {
  color: var(--text-muted); font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 140px;
}

/* === Responsive breakpoints === */

/* Tablet (881px - 1100px): medium cards */
@media (max-width: 1100px) {
  .showcase__track { animation-duration: 40s; }
}

/* Mobile landscape / small tablet (641px - 880px) */
@media (max-width: 880px) {
  .showcase { margin-top: 24px; }
  .showcase__label {
    font-size: 12px;
    padding: 6px 14px;
    flex-wrap: wrap; justify-content: center;
  }
  .showcase__track { gap: 10px; animation-duration: 35s; }
  .showcase__store { padding: 7px 14px 7px 7px; gap: 8px; }
  .showcase__logo { width: 38px; height: 38px; }
  .showcase__initial { font-size: 16px; }
  .showcase__info strong { font-size: 12px; max-width: 120px; }
  .showcase__info small { font-size: 10px; max-width: 120px; }
}

/* Small mobile (≤ 640px) */
@media (max-width: 640px) {
  .showcase { margin-top: 20px; }
  .showcase__label {
    font-size: 11px;
    padding: 6px 12px;
    gap: 6px;
  }
  .showcase__track { gap: 8px; animation-duration: 30s; padding: 0 8px; }
  .showcase__store {
    padding: 6px 12px 6px 6px;
    border-radius: 999px;
    gap: 8px;
  }
  .showcase__logo { width: 34px; height: 34px; border-width: 1.5px; }
  .showcase__initial { font-size: 14px; }
  .showcase__info strong {
    font-size: 12px;
    max-width: 100px;
  }
  .showcase__info small {
    display: none; /* hide category on very small screens for cleaner look */
  }
}

/* Extra small (≤ 380px) */
@media (max-width: 380px) {
  .showcase__info strong { max-width: 90px; }
  .showcase__logo { width: 30px; height: 30px; }
  .showcase__track { animation-duration: 25s; }
}

/* Prefer-reduced-motion: slower / static */
@media (prefers-reduced-motion: reduce) {
  .showcase__track { animation-duration: 120s; }
}
.mockup-card {
  background: #fff; border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-color); overflow: hidden;
  transition: transform .4s;
}
.mockup-card:hover { transform: translateY(-6px) rotate(-1deg); }
.mockup-card__bar { height: 36px; background: linear-gradient(135deg, #2563eb, #6366f1, #059669); }
.mockup-card__body { padding: 20px; display: grid; gap: 12px; }
.mockup-product { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-md); background: var(--bg-tertiary); }
.mockup-product span { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, #dbeafe, #d1fae5); }
.mockup-product b { display: block; font-size: 14px; color: var(--text-primary); }
.mockup-product small { color: var(--color-primary); font-weight: 700; }

/* ---------- Sections ---------- */
.section-title { text-align: center; margin: 0 0 14px; font-size: clamp(26px, 3vw, 36px); font-weight: 800; }
.section-sub   { text-align: center; color: var(--text-secondary); margin: 0 0 36px; font-size: 17px; }

/* ---------- Benefits (4 cards, 4-column layout) ---------- */
.benefits { padding: 100px 0; background: #fff; }
.benefits__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px;
}
.benefit-card {
  background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  padding: 28px 24px; box-shadow: var(--shadow-card);
  transition: all .25s ease;
}
.benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--color-primary-light); }
.benefit-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--bg-gradient-soft); font-size: 26px;
  margin-bottom: 16px;
}
.benefit-card h3 { font-size: 17px; font-weight: 800; margin: 0 0 8px; color: var(--text-primary); line-height: 1.3; }
.benefit-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin: 0; }

@media (max-width: 1000px) { .benefits__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 520px)  { .benefits__grid { grid-template-columns: 1fr; } .benefits { padding: 60px 0; } }

/* ---------- SEO content — ¿Qué es CatalogoCode? ---------- */
.seo-content { padding: 90px 0; background: var(--bg-secondary); }
.seo-content__header { text-align: center; margin-bottom: 48px; }

/* Comparativa: Sin vs Con CatalogoCode */
.seo-comparison {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: 900px; margin: 0 auto 56px;
}
.seo-comparison__card {
  background: #fff; border-radius: var(--radius-xl);
  padding: 32px 28px; box-shadow: var(--shadow-card);
  border: 1px solid var(--border-color);
}
.seo-comparison__card--bad  { border-color: #fecaca; background: #fef2f2; }
.seo-comparison__card--good {
  border-color: var(--color-primary-light);
  background: linear-gradient(135deg, #eff6ff, #ecfdf5);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.seo-comparison__head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 2px dashed rgba(0,0,0,0.06);
}
.seo-comparison__icon { font-size: 28px; }
.seo-comparison__head h3 {
  margin: 0; font-size: 18px; font-weight: 800; color: var(--text-primary);
}
.seo-comparison__card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.seo-comparison__card li {
  font-size: 14px; line-height: 1.5; color: var(--text-secondary);
  padding-left: 22px; position: relative;
}
.seo-comparison__card--bad li::before {
  content: '—'; color: #dc2626; font-weight: 800;
  position: absolute; left: 0; top: 0;
}
.seo-comparison__card--good li::before {
  content: '✓'; color: #059669; font-weight: 800;
  position: absolute; left: 0; top: 0;
}
.seo-comparison__card--good li strong { color: var(--text-primary); }

/* Rubros grid */
.seo-rubros {
  max-width: 900px; margin: 0 auto;
  background: #fff; border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 36px 28px; box-shadow: var(--shadow-card);
}
.seo-rubros__title {
  text-align: center; font-size: 20px; font-weight: 800;
  margin: 0 0 6px; color: var(--text-primary);
}
.seo-rubros__sub {
  text-align: center; font-size: 13px; color: var(--text-muted);
  margin: 0 0 24px;
}
.seo-rubros__grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
}
.seo-rubro {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 6px 14px; border-radius: var(--radius-md);
  background: var(--bg-secondary);
  border: 1.5px solid transparent;
  transition: all .25s ease;
  cursor: pointer;
  text-decoration: none;
  position: relative;
}
.seo-rubro::after {
  content: '→';
  position: absolute; top: 6px; right: 8px;
  font-size: 12px; font-weight: 800;
  color: var(--color-primary);
  opacity: 0;
  transform: translateX(-4px);
  transition: all .2s ease;
}
.seo-rubro:hover {
  background: #fff;
  border-color: var(--color-primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(37,99,235,0.12);
}
.seo-rubro:hover::after { opacity: 1; transform: translateX(0); }
.seo-rubro:hover span { transform: scale(1.1); }
.seo-rubro span { font-size: 28px; transition: transform .25s ease; }
.seo-rubro strong {
  font-size: 12px; font-weight: 700;
  color: var(--text-primary); text-align: center;
}

/* Responsive */
@media (max-width: 880px) {
  .seo-comparison { grid-template-columns: 1fr; max-width: 520px; }
  .seo-comparison__card--good { transform: none; }
  .seo-rubros__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 520px) {
  .seo-content { padding: 50px 0; }
  .seo-content__header { margin-bottom: 32px; }
  .seo-comparison { gap: 14px; margin-bottom: 36px; }
  .seo-comparison__card { padding: 24px 20px; }
  .seo-rubros { padding: 24px 16px; }
  .seo-rubros__grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .seo-rubro { padding: 12px 4px; }
  .seo-rubro span { font-size: 24px; }
  .seo-rubro strong { font-size: 11px; }
}

/* ---------- FAQ ---------- */
.faq { padding: 100px 0; background: #fff; }
.faq__list { max-width: 720px; margin: 0 auto; display: grid; gap: 12px; }
.faq__item {
  background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  overflow: hidden; transition: all .2s;
}
.faq__item[open] { border-color: var(--color-primary-light); box-shadow: var(--shadow-md); }
.faq__item summary {
  padding: 20px 24px; font-weight: 700; font-size: 16px; color: var(--text-primary);
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
  transition: background .2s;
}
.faq__item summary:hover { background: var(--bg-secondary); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+'; font-size: 22px; font-weight: 400; color: var(--color-primary);
  transition: transform .3s;
}
.faq__item[open] summary::after { content: '−'; }
.faq__item p {
  padding: 0 24px 20px; margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.7;
}
@media (max-width: 600px) {
  .faq { padding: 60px 0; }
  .faq__item summary { padding: 16px 18px; font-size: 15px; }
  .faq__item p { padding: 0 18px 16px; font-size: 14px; }
}

/* ---------- Final CTA ---------- */
.final-cta { padding: 80px 0; background: var(--bg-gradient-hero); }
.final-cta__inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.final-cta h2 { color: #fff; font-size: clamp(26px, 4vw, 40px); font-weight: 800; margin: 0; }
.final-cta p { color: rgba(255,255,255,0.8); font-size: 18px; margin: 0; max-width: 500px; }
.final-cta .btn { font-size: 18px; padding: 16px 36px; }
@media (max-width: 600px) { .final-cta { padding: 50px 0; } .final-cta p { font-size: 15px; } }

/* ---------- WhatsApp float ---------- */
.wa-float {
  position: fixed; bottom: 24px; right: 24px; z-index: 9990;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(37,211,102,0.4);
  transition: transform .2s, box-shadow .2s;
  animation: waFloat 3s ease-in-out infinite;
}
.wa-float:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(37,211,102,0.5); }
@keyframes waFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (max-width: 480px) { .wa-float { bottom: 16px; right: 16px; width: 50px; height: 50px; } }

/* ---------- Demo Flow (phone mockups) ---------- */
.demo-flow { padding: 100px 0; background: var(--bg-gradient-soft); overflow: hidden; }
.demo-flow__phones {
  display: flex; align-items: flex-start; justify-content: center; gap: 24px;
  margin-top: 48px; perspective: 1200px;
}
.demo-flow__step { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.demo-flow__step--up { margin-top: -20px; }
.demo-flow__arrow { color: var(--color-primary); margin-top: 140px; opacity: .5; animation: arrowPulse 2s ease infinite; }
@keyframes arrowPulse { 0%,100% { transform: translateX(0); opacity: .5; } 50% { transform: translateX(6px); opacity: 1; } }

.demo-flow__label { text-align: center; max-width: 220px; }
.demo-flow__label h3 { font-size: 18px; font-weight: 800; margin: 8px 0 6px; color: var(--text-primary); }
.demo-flow__label p { font-size: 14px; color: var(--text-secondary); line-height: 1.5; margin: 0; }
.demo-flow__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-primary); color: #fff; font-weight: 800; font-size: 16px;
}

/* Phone mockup frame */
.phone-mockup {
  position: relative; width: 220px; height: 420px;
  background: #0f172a; border-radius: 32px; padding: 8px;
  box-shadow: 0 25px 60px rgba(15,23,42,0.3), 0 0 0 1px rgba(255,255,255,0.05) inset;
  transition: transform .4s ease;
}
.phone-mockup:hover { transform: translateY(-8px) rotateY(-2deg); }
.phone-mockup--accent { box-shadow: 0 25px 60px rgba(37,99,235,0.25), 0 0 0 2px rgba(37,99,235,0.2); }
.phone-mockup--green { box-shadow: 0 25px 60px rgba(5,150,105,0.25), 0 0 0 2px rgba(5,150,105,0.2); }
.phone-mockup__notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 22px; background: #0f172a; border-radius: 0 0 14px 14px; z-index: 10;
}
.phone-mockup__screen {
  width: 100%; height: 100%; background: #fff; border-radius: 24px; overflow: hidden;
  display: flex; flex-direction: column;
}

/* Mini UI inside phone: header */
.pm-header {
  display: flex; align-items: center; gap: 8px; padding: 28px 12px 8px; border-bottom: 1px solid #f1f5f9;
}
.pm-logo { width: 24px; height: 24px; background: #dbeafe; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.pm-store-name { font-size: 13px; font-weight: 700; color: #0f172a; flex: 1; }
.pm-icons { display: flex; gap: 8px; align-items: center; }
.pm-cart-badge { position: relative; }
.pm-cart-count {
  position: absolute; top: -6px; right: -8px; width: 16px; height: 16px; border-radius: 50%;
  background: #2563eb; color: #fff; font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* Categories */
.pm-categories { display: flex; gap: 6px; padding: 8px 12px; overflow: hidden; }
.pm-cat {
  font-size: 10px; padding: 3px 10px; border-radius: 20px; white-space: nowrap;
  background: #f1f5f9; color: #64748b; font-weight: 600;
}
.pm-cat--active { background: #2563eb; color: #fff; }

/* Product grid */
.pm-products { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 10px; flex: 1; overflow: hidden; }
.pm-product {
  background: #fff; border: 1px solid #f1f5f9; border-radius: 10px; padding: 6px; position: relative;
  transition: box-shadow .2s;
}
.pm-product--highlight { border-color: #2563eb; box-shadow: 0 0 0 1px rgba(37,99,235,0.3); }
/* Animated cursor */
.pm-cursor {
  position: absolute; width: 18px; height: 18px; pointer-events: none; z-index: 20;
  opacity: 0; transition: opacity .3s;
}
.pm-cursor::before {
  content: ''; display: block; width: 0; height: 0;
  border-left: 7px solid #0f172a; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,.4));
  transform: rotate(-30deg);
}
.pm-cursor.is-visible { opacity: 1; }
/* Tap ripple */
.pm-tap-ring {
  position: absolute; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(37,99,235,0.25); pointer-events: none; z-index: 19;
  transform: scale(0); opacity: 0;
}
.pm-tap-ring.is-tap { animation: tapRing .5s ease forwards; }
@keyframes tapRing { 0% { transform: scale(0); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }
/* Product select glow */
.pm-product.is-selected { border-color: #2563eb; box-shadow: 0 0 12px rgba(37,99,235,0.4); transform: scale(1.05); transition: all .3s; }
/* Add-to-cart button press */
.pm-add-btn.is-pressed { transform: scale(0.93); background: #1d4ed8; transition: all .15s; }
.pm-add-btn { transition: transform .15s, background .15s; }
/* Cart count bump */
.pm-cart-count.is-bump { animation: countBump .4s ease; }
@keyframes countBump { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } }
/* WhatsApp typing indicator */
.pm-wa-typing {
  display: inline-flex; gap: 3px; padding: 8px 14px; background: #202c33; border-radius: 8px;
  align-self: flex-start; border-bottom-left-radius: 0;
}
.pm-wa-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: #8696a0;
  animation: typingDot 1.4s ease infinite;
}
.pm-wa-typing span:nth-child(2) { animation-delay: .2s; }
.pm-wa-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes typingDot { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
/* WhatsApp bubble reveal */
.pm-wa-bubble { transition: opacity .4s, transform .4s; }
.pm-wa-bubble.is-hidden { opacity: 0; transform: translateY(10px); display: none; }
.pm-wa-bubble.is-revealed { opacity: 1; transform: translateY(0); display: block; }
.pm-wa-typing.is-hidden { display: none; }
.pm-wa-typing.is-revealed { display: inline-flex; }
/* Minicart row reveal */
.pm-minicart__row.is-hidden, .pm-minicart__total.is-hidden { opacity: 0; max-height: 0; overflow: hidden; padding: 0; margin: 0; transition: all .4s; }
.pm-minicart__row.is-revealed, .pm-minicart__total.is-revealed { opacity: 1; max-height: 40px; transition: all .4s; }
/* Active phone glow during its step */
.phone-mockup.is-active-step { box-shadow: 0 25px 60px rgba(37,99,235,0.4), 0 0 30px rgba(37,99,235,0.15); }
.pm-product__img {
  border-radius: 8px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 24px;
  margin-bottom: 4px;
}
.pm-product__name { font-size: 9px; font-weight: 700; color: #0f172a; line-height: 1.2; }
.pm-product__price { font-size: 10px; font-weight: 800; color: #2563eb; }
.pm-product__badge {
  position: absolute; top: 4px; right: 4px;
  background: #dc2626; color: #fff; font-size: 7px; font-weight: 800;
  padding: 2px 5px; border-radius: 4px;
}

/* Product detail screen */
.pm-detail { padding: 0 12px; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.pm-detail__img {
  border-radius: 12px; height: 100px; display: flex; align-items: center; justify-content: center;
  font-size: 40px; margin-bottom: 8px;
}
.pm-detail__name { font-size: 13px; font-weight: 800; color: #0f172a; }
.pm-detail__desc { font-size: 9px; color: #64748b; line-height: 1.4; margin: 3px 0; }
.pm-detail__tags { display: flex; gap: 4px; margin: 4px 0; }
.pm-detail__tags span {
  font-size: 8px; padding: 2px 7px; border-radius: 20px; background: #f1f5f9; color: #475569;
}
.pm-detail__price { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.pm-detail__price s { font-size: 11px; color: #94a3b8; }
.pm-detail__price strong { font-size: 16px; color: #0f172a; font-weight: 900; }
.pm-off { font-size: 9px; background: #dcfce7; color: #16a34a; padding: 2px 6px; border-radius: 4px; font-weight: 700; }
.pm-detail__actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.pm-qty {
  display: flex; align-items: center; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden;
}
.pm-qty button {
  width: 26px; height: 26px; border: none; background: #f8fafc; color: #475569; font-size: 14px;
  font-weight: 700; cursor: default;
}
.pm-qty span { padding: 0 10px; font-size: 13px; font-weight: 700; }
.pm-add-btn {
  flex: 1; text-align: center; padding: 7px 0; background: #2563eb; color: #fff;
  border-radius: 8px; font-size: 11px; font-weight: 700;
}

/* Mini cart */
.pm-minicart {
  background: #f8fafc; border-top: 1px solid #e2e8f0; padding: 8px 12px; margin-top: auto;
}
.pm-minicart__row { display: flex; justify-content: space-between; font-size: 9px; color: #475569; padding: 2px 0; }
.pm-minicart__row--new { color: #2563eb; font-weight: 700; animation: newItem .5s ease; }
@keyframes newItem { 0% { background: #dbeafe; } 100% { background: transparent; } }
.pm-minicart__total {
  display: flex; justify-content: space-between; font-size: 12px; color: #0f172a;
  border-top: 1px solid #e2e8f0; padding-top: 4px; margin-top: 4px;
}

/* WhatsApp screen */
.pm-screen--wa { background: #0b141a; }
.pm-wa-header {
  display: flex; align-items: center; gap: 8px; padding: 28px 12px 10px; background: #1f2c34;
}
.pm-wa-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: #00a884;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.pm-wa-header strong { font-size: 13px; color: #e9edef; }
.pm-wa-header small { display: block; font-size: 9px; color: #8696a0; }
.pm-wa-header > div { flex: 1; }
.pm-wa-chat { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; overflow: hidden;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.pm-wa-bubble {
  max-width: 92%; border-radius: 8px; padding: 6px 10px; font-size: 9px; line-height: 1.5; position: relative;
}
.pm-wa-bubble p { margin: 0; }
.pm-wa-bubble--out { background: #005c4b; color: #e9edef; align-self: flex-end; border-bottom-right-radius: 0; }
.pm-wa-bubble--in { background: #202c33; color: #e9edef; align-self: flex-start; border-bottom-left-radius: 0; }
.pm-wa-link { color: #53bdeb; text-decoration: underline; font-size: 8px; }
.pm-wa-time { display: block; text-align: right; font-size: 7px; color: rgba(255,255,255,0.45); margin-top: 2px; }

/* Responsive demo-flow */
@media (max-width: 900px) {
  .demo-flow__phones { flex-direction: column; align-items: center; gap: 20px; }
  .demo-flow__step--up { margin-top: 0; }
  .demo-flow__arrow { margin-top: 0; transform: rotate(90deg); }
  .demo-flow__step { flex-direction: row; gap: 20px; max-width: 440px; width: 100%; }
  .demo-flow__label { text-align: left; }
  .phone-mockup { width: 180px; height: 350px; flex-shrink: 0; }
}
@media (max-width: 520px) {
  .demo-flow { padding: 60px 0; }
  .demo-flow__step { flex-direction: column; }
  .demo-flow__label { text-align: center; }
  .demo-flow__arrow { transform: rotate(90deg); }
  .phone-mockup { width: 240px; height: 440px; }
}

/* ---------- Plans ---------- */
.plans { padding: 100px 0; background: var(--bg-secondary); }
.plans__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 36px; }
.plan-card {
  position: relative;
  background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-xl);
  padding: 36px 28px; text-align: center; box-shadow: var(--shadow-card);
  transition: all .25s ease;
}
.plan-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.plan-card--featured {
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-lg), 0 0 0 4px rgba(37,99,235,0.08);
  transform: scale(1.02);
}
/* Plan actual del usuario — se destaca siempre, incluso si no está activo */
.plan-card--current {
  border: 2px solid #10b981;
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 40%);
  box-shadow: 0 10px 30px rgba(16,185,129,0.15);
}
.plan-card--current:hover { transform: translateY(-4px); }
.plan-card--current.plan-card--featured {
  border-color: #10b981;
  box-shadow: var(--shadow-lg), 0 0 0 4px rgba(16,185,129,0.12);
}
.plan-card__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.plan-card__name  { font-size: 22px; font-weight: 700; }
.plan-card__price { margin: 12px 0 20px; }
.plan-card__price strong { font-size: 42px; color: var(--text-primary); font-weight: 800; }
.plan-card__price small  { color: var(--text-muted); margin-left: 4px; font-size: 14px; }
.plan-card__tagline {
  color: var(--text-muted);
  font-size: 13px;
  margin: 4px 0 0;
  font-style: italic;
}
/* Billing cycle toggle — centered wrap */
.billing-toggle-wrap {
  display: flex;
  justify-content: center;
  margin: 0 0 36px;
}
.billing-toggle {
  display: inline-flex;
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-pill);
  padding: 4px;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.billing-toggle__btn {
  background: transparent;
  border: none;
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .2s;
  display: inline-flex; align-items: center; gap: 8px;
}
.billing-toggle__btn.is-active {
  background: linear-gradient(135deg, #2563eb, #6366f1);
  color: #fff;
  box-shadow: 0 4px 12px rgba(37,99,235,0.3);
}
.billing-toggle__save {
  background: #d1fae5; color: #047857;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.billing-toggle__btn.is-active .billing-toggle__save {
  background: rgba(255,255,255,0.25); color: #fff;
}

/* Price visibility toggled by .plans--yearly class on .plans section */
.plans .plan-card__price--monthly { display: block; }
.plans .plan-card__price--yearly  { display: none; }
.plans.plans--yearly .plan-card__price--monthly { display: none; }
.plans.plans--yearly .plan-card__price--yearly  { display: block; }

/* Yearly price savings display (strikethrough + ahorro pill) */
.plan-card__savings {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.plan-card__savings s {
  color: var(--text-muted);
  font-size: 15px;
  text-decoration-thickness: 2px;
  text-decoration-color: #dc2626;
}
.plan-card__save-pill {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  color: #047857;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  display: inline-block;
}

/* Free trial note under CTA */
.plan-card__trial {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin: 10px 0 0;
}

.plan-card__features { display: grid; gap: 10px; text-align: left; margin-bottom: 28px; color: var(--text-secondary); font-size: 14px; line-height: 1.45; }
.plan-card__features li strong { color: var(--text-primary); }
.plan-feat--muted {
  color: var(--text-muted) !important;
  opacity: 0.7;
  font-size: 13px;
}
.plan-feat--muted::before {
  color: #94a3b8;
}

/* ---------- Footer ---------- */
.footer { background: var(--text-primary); color: #cbd5e1; padding: 64px 0 28px; }
.footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; padding: 0 24px; max-width: var(--container-max); margin: 0 auto; }
.footer h4 { color: #fff; margin-bottom: 14px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; }
.footer a { color: #cbd5e1; display: block; padding: 5px 0; font-size: 14px; }
.footer a:hover { color: #fff; }
.footer__bottom { text-align: center; margin: 40px 24px 0; color: #94a3b8; font-size: 13px; border-top: 1px solid #1e293b; padding-top: 20px; }

@media (max-width: 720px) {
  .footer__inner { grid-template-columns: 1fr; }
}

/* ---------- Auth ---------- */
.auth-shell {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: var(--bg-gradient-soft); position: relative; overflow: hidden;
}
.auth-shell::before, .auth-shell::after {
  content: ''; position: absolute; width: 480px; height: 480px; border-radius: 50%;
  filter: blur(100px); opacity: .4; z-index: 0;
}
.auth-shell::before { background: #60a5fa; top: -200px; left: -200px; }
.auth-shell::after  { background: #34d399; bottom: -200px; right: -200px; }
.auth-card {
  background: #fff; border-radius: var(--radius-xl);
  padding: 44px; box-shadow: var(--shadow-xl); width: 100%; max-width: 440px;
  position: relative; z-index: 1;
}
.auth-card--wide { max-width: 540px; }
.auth-card h1 { margin: 18px 0 6px; font-size: 28px; }
.auth-card__footer { text-align: center; margin: 20px 0 0; color: var(--text-secondary); font-size: 14px; }

.plan-picker { border: none; padding: 0; margin: 8px 0; display: grid; gap: 10px; }
.plan-picker legend { font-size: 13px; color: var(--text-primary); margin-bottom: 8px; font-weight: 600; }
.plan-picker__option {
  flex-direction: row; align-items: center; gap: 12px;
  padding: 14px 16px; border: 2px solid var(--border-color); border-radius: var(--radius-md);
  cursor: pointer; transition: all .15s;
}
.plan-picker__option:hover { border-color: var(--color-primary); }
.plan-picker__option:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-light); }
.plan-picker__option input { width: auto; }

/* ---------- Directory ---------- */
.dir-search {
  display: flex; gap: 8px; margin: 28px auto 0; max-width: 580px;
  box-shadow: var(--shadow-lg); border-radius: var(--radius-pill); background: #fff; padding: 6px;
}
.dir-search input { border: none; box-shadow: none !important; padding-left: 22px; font-size: 15px; }
.dir-search input:focus { box-shadow: none; }

.dir-filters { padding: 36px 24px 0; max-width: var(--container-max); margin: 0 auto; }
.country-carousel { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.country-carousel__nav {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-color);
  background: #fff; box-shadow: var(--shadow-sm); flex-shrink: 0; font-size: 18px; color: var(--text-secondary);
  transition: all .15s;
}
.country-carousel__nav:hover { color: var(--color-primary); border-color: var(--color-primary); }
.country-carousel__track {
  display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none; padding: 6px 0;
}
.country-carousel__track::-webkit-scrollbar { display: none; }
.country-pill {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 16px; border-radius: var(--radius-lg); background: #fff;
  border: 2px solid transparent; box-shadow: var(--shadow-sm);
  color: var(--text-secondary); font-size: 13px; font-weight: 600; min-width: 88px; text-align: center;
  transition: all .15s;
}
.country-pill:hover { text-decoration: none; transform: translateY(-2px); }
.country-pill.is-active { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary-dark); }
.country-pill__flag {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.country-pill__flag--all { font-size: 22px; display: inline-flex; align-items: center; justify-content: center; box-shadow: none; background: linear-gradient(135deg, #dbeafe, #d1fae5); }
.flag-mini { width: 18px; height: 18px; border-radius: 50%; vertical-align: middle; margin-right: 4px; display: inline-block; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }

.cat-pills { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 0; }
.cat-pill {
  display: inline-flex; align-items: center; padding: 9px 16px; border-radius: var(--radius-pill);
  background: #fff; border: 1.5px solid var(--border-color); color: var(--text-secondary);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.cat-pill:hover { text-decoration: none; border-color: var(--color-primary); }
.cat-pill.is-active {
  background: linear-gradient(135deg, #2563eb, #6366f1); color: #fff; border-color: transparent;
  box-shadow: var(--shadow-glow-blue);
}
.cat-pill--store.is-active { background: var(--accent); color: #fff; border-color: transparent; }

.dir-featured, .dir-results { padding: 36px 24px; max-width: var(--container-max); margin: 0 auto; }
.store-grid {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.store-card {
  background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--border-color);
  box-shadow: var(--shadow-card); overflow: hidden;
  display: flex; flex-direction: column;
  transition: all .25s ease;
}
.store-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--color-primary); }
.store-card__media { position: relative; aspect-ratio: 16/9; background: linear-gradient(135deg, #1e3a8a, #0f766e); overflow: hidden; }
.store-card__media img { width: 100%; height: 100%; object-fit: cover; }
.store-card__media-fallback { width: 100%; height: 100%; }
.store-card__cat { position: absolute; top: 12px; right: 12px; }
.store-card__logo {
  position: absolute; bottom: -28px; left: 24px;
  width: 60px; height: 60px; border-radius: 50%; border: 4px solid #fff;
  background: #fff; box-shadow: var(--shadow-md); object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
}
.store-card__logo--empty { background: var(--card-accent, var(--color-primary)); color: #fff; font-size: 26px; font-weight: 700; }
.store-card__body { padding: 44px 22px 22px; }
.store-card__country { color: var(--text-muted); font-size: 13px; margin: 0 0 6px; font-weight: 500; }
.store-card__name    { font-size: 17px; font-weight: 800; margin: 0 0 16px; letter-spacing: 0.02em; }

.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 36px; }
.pagination__page {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-md);
  background: #fff; border: 1.5px solid var(--border-color); color: var(--text-secondary);
  font-weight: 600; transition: all .15s;
}
.pagination__page:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }
.pagination__page.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ---------- Storefront ---------- */
/* Banner promocional — adopta el color de marca de la tienda por defecto.
   Cada tema puede seguir sobreescribiendo con reglas .store-page--<tema> .promo-bar
   (ver bloque "Promo bar — overrides por tema" más abajo). El fallback usa el mismo
   degradado original para stores sin --accent. */
.promo-bar {
  background: linear-gradient(
    135deg,
    var(--accent, #2563eb),
    color-mix(in srgb, var(--accent, #2563eb) 65%, #0f172a 35%)
  );
  color: #fff; text-align: center; font-size: 14px; padding: 10px 16px; font-weight: 600;
  letter-spacing: 0.02em;
}
/* Navegadores sin color-mix → fallback con el accent plano */
@supports not (background: color-mix(in srgb, red, blue)) {
  .promo-bar { background: var(--accent, linear-gradient(135deg, #2563eb, #6366f1, #059669)); }
}
.store-header { position: relative; min-height: 260px; background: var(--bg-gradient-hero); overflow: hidden; }
.store-header__banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.store-header__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.92) 100%);
}
.store-header__content { position: relative; z-index: 2; padding: 48px 20px 24px; text-align: center; }
.store-header__logo-wrap { display: flex; justify-content: center; margin-bottom: 14px; }
.store-header__logo {
  width: 104px; height: 104px; border-radius: 50%; object-fit: cover;
  background: #fff; border: 4px solid #fff; box-shadow: var(--shadow-lg);
  display: inline-flex; align-items: center; justify-content: center;
  outline: 3px solid var(--accent); outline-offset: 2px;
}
.store-header__logo--empty { background: var(--accent); color: #fff; font-size: 40px; font-weight: 800; }
.store-header__name { margin: 12px 0 6px; font-size: 30px; font-weight: 800; }
.store-header__desc { color: var(--text-secondary); max-width: 600px; margin: 0 auto; font-size: 15px; }
.store-header__hours { margin-top: 14px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.store-actions {
  display: flex; justify-content: space-around; padding: 16px 8px;
  background: #fff; border-bottom: 1px solid var(--border-color);
  position: sticky; top: 0; z-index: 5;
}
.store-action {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: none; color: var(--text-secondary); font-size: 11px; font-weight: 600;
  text-decoration: none; cursor: pointer; padding: 4px 12px; border-radius: 8px;
  transition: all .15s;
}
.store-action:hover { color: var(--accent); background: var(--bg-tertiary); text-decoration: none; }

.catalog-search {
  display: block; margin: 12px 16px; padding: 12px 16px;
  border: 1.5px solid var(--border-color); border-radius: var(--radius-md); width: calc(100% - 32px);
}

.cat-menu {
  display: flex; gap: 8px; padding: 14px 16px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  background: #fff; border-bottom: 1px solid var(--border-color);
}
.cat-menu::-webkit-scrollbar { display: none; }
.cat-menu .cat-pill { background: #f1f5f9; color: var(--text-secondary); border: none; flex-shrink: 0; }

.catalog {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  padding: 24px; padding-bottom: 110px; max-width: var(--container-max); margin: 0 auto;
}
.product-card {
  position: relative; background: #fff; border-radius: var(--radius-lg);
  border: 1px solid var(--border-color); box-shadow: var(--shadow-card);
  overflow: hidden; display: flex; flex-direction: column;
  transition: all .2s;
}
.product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--accent); }
.product-card.is-out  { opacity: .9; }
.product-card.is-hidden { display: none !important; }

.product-card__media { position: relative; aspect-ratio: 1/1; background: var(--bg-tertiary); overflow: hidden; border-radius: var(--radius-md); margin: 8px; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__media-empty { width: 100%; height: 100%; background: linear-gradient(135deg, #eef2ff, #ecfdf5); }

.product-card__badge--tl { position: absolute; top: 8px; left: 8px; }
.product-card__badge--tr { position: absolute; top: 8px; right: 8px; }
.product-card__sold-out {
  position: absolute; inset: 0; background: rgba(15,23,42,.78);
  color: #fff; display: grid; place-items: center; font-weight: 800; letter-spacing: .15em; font-size: 14px;
}
.product-card__add {
  position: absolute; bottom: 10px; right: 10px;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: #fff; border: none;
  font-size: 22px; line-height: 1; box-shadow: var(--shadow-md);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .15s ease, box-shadow .15s ease;
}
.product-card__add:hover { transform: scale(1.1); }
.product-card__add:disabled { background: #cbd5e1; cursor: not-allowed; }

.product-card__body { padding: 4px 14px 16px; display: grid; gap: 4px; }
.product-card__name { font-size: 14px; font-weight: 700; margin: 0; }
.product-card__price strong { color: var(--accent); font-size: 17px; font-weight: 800; }
.product-card__compare { color: var(--text-muted); text-decoration: line-through; font-size: 13px; margin-left: 6px; }

/* Bottom nav */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; transform: translateZ(0);
  display: flex; justify-content: space-around; align-items: center;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-color);
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  padding: 8px 4px env(safe-area-inset-bottom, 8px);
  z-index: 120;
  isolation: isolate;
  pointer-events: auto;
}
.bottom-nav__item {
  display: inline-flex; flex-direction: column; align-items: center;
  background: none; border: none; color: var(--text-muted); font-size: 11px; gap: 2px;
  text-decoration: none; position: relative; padding: 10px 12px; cursor: pointer;
  min-width: 44px; min-height: 44px; justify-content: center;
  -webkit-tap-highlight-color: rgba(0,0,0,.08);
  touch-action: manipulation;
}
.bottom-nav__item svg,
.bottom-nav__cart svg { pointer-events: none; }
.bottom-nav__item:hover, .bottom-nav__item.is-active { color: var(--accent); text-decoration: none; }
.bottom-nav__item span { font-size: 22px; }

/* ═══════════════════════════════════════════════
   WhatsApp buttons — siempre en verde oficial de WhatsApp
   (#25D366 / #128C7E), independiente del tema/acento de la tienda.
   Afecta al botón de la barra superior (.store-action) y al de
   la barra inferior (.bottom-nav__item) cuando enlazan a wa.me.
   Prefijo .store-page para ganar a los overrides por tema
   (ej: .store-page--light .bottom-nav__item { color:#94a3b8 !important }).
   ═══════════════════════════════════════════════ */
.store-page .store-action[href^="https://wa.me/"],
.store-page .store-action[href^="https://api.whatsapp.com/"],
.store-page .bottom-nav__item[href^="https://wa.me/"],
.store-page .bottom-nav__item[href^="https://api.whatsapp.com/"] {
  color: #25D366 !important;
}
.store-page .store-action[href^="https://wa.me/"]:hover,
.store-page .store-action[href^="https://api.whatsapp.com/"]:hover,
.store-page .bottom-nav__item[href^="https://wa.me/"]:hover,
.store-page .bottom-nav__item[href^="https://api.whatsapp.com/"]:hover {
  color: #128C7E !important;
  background: rgba(37, 211, 102, 0.10) !important;
}
/* El SVG hereda currentColor → el ícono se pinta con el verde */
.store-page .store-action[href^="https://wa.me/"] svg,
.store-page .store-action[href^="https://api.whatsapp.com/"] svg,
.store-page .bottom-nav__item[href^="https://wa.me/"] svg,
.store-page .bottom-nav__item[href^="https://api.whatsapp.com/"] svg {
  color: #25D366 !important;
  fill: currentColor !important;
}
.store-page .store-action[href^="https://wa.me/"]:hover svg,
.store-page .store-action[href^="https://api.whatsapp.com/"]:hover svg,
.store-page .bottom-nav__item[href^="https://wa.me/"]:hover svg,
.store-page .bottom-nav__item[href^="https://api.whatsapp.com/"]:hover svg {
  color: #128C7E !important;
}
.bottom-nav__badge {
  position: absolute; top: 2px; right: 4px;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 800;
  border-radius: 999px; padding: 2px 6px; min-width: 18px; text-align: center;
}

/* Welcome popup */
.welcome-popup { border: none; background: transparent; padding: 0; max-width: 92vw; }
.welcome-popup::backdrop { background: rgba(15,23,42,0.65); backdrop-filter: blur(6px); }
.welcome-popup__card {
  background: #fff; border-radius: var(--radius-xl); padding: 36px;
  text-align: center; max-width: 400px; box-shadow: var(--shadow-xl); position: relative;
}
.welcome-popup__close {
  position: absolute; top: 14px; right: 14px;
  background: var(--bg-tertiary); border: none; font-size: 20px; color: var(--text-muted);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
}
.welcome-popup__logo { width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 16px; outline: 3px solid var(--accent); outline-offset: 2px; }

/* Cart drawer */
.cart-drawer {
  position: fixed; top: 0; right: 0; width: min(440px, 100%); height: 100%;
  background: #fff; box-shadow: -16px 0 48px rgba(0,0,0,0.15);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; z-index: 60;
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 24px; border-bottom: 1px solid var(--border-color);
}
.cart-drawer__head h2 { margin: 0; font-size: 20px; font-weight: 800; }
.cart-drawer__head button { background: var(--bg-tertiary); border: none; font-size: 22px; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }
.cart-drawer__list { flex: 1; overflow-y: auto; padding: 16px 24px; display: grid; gap: 12px; }
.cart-drawer__empty { padding: 60px 20px; color: var(--text-muted); text-align: center; font-size: 14px; }
.cart-drawer__foot { padding: 20px 24px; border-top: 1px solid var(--border-color); background: var(--bg-secondary); }
.cart-drawer__total { display: flex; justify-content: space-between; align-items: center; margin: 0 0 14px; font-size: 18px; font-weight: 600; }
.cart-drawer__total strong { font-size: 22px; color: var(--accent); }

.cart-item { display: grid; grid-template-columns: 60px 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: var(--radius-md); background: var(--bg-secondary); border: 1px solid var(--border-color); }
.cart-item img { width: 60px; height: 60px; border-radius: var(--radius-sm); object-fit: cover; }
.cart-item__name { font-weight: 600; font-size: 14px; margin: 0 0 4px; }
.cart-item__price { color: var(--accent); font-weight: 800; font-size: 14px; }
/* Chip pequeño bajo el nombre con las variantes seleccionadas (ej: "Masa: Delgada · Tamaño: 40 CM") */
.cart-item__variant {
  display: inline-block;
  margin: 0 0 6px;
  padding: 2px 8px;
  background: rgba(99,102,241,.1);
  color: #6366f1;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Overrides por tema: colores coordinados en vez del índigo default */
.store-page--warm .cart-item__variant { background: rgba(124,90,43,.1); color: #7c5a2b; }
.store-page--botanical .cart-item__variant { background: rgba(61,107,61,.1); color: #3d6b3d; }
.store-page--aurora-light .cart-item__variant { background: rgba(236,72,153,.12); color: #be185d; }
.store-page--luxury-gold .cart-item__variant { background: rgba(212,175,55,.15); color: #d4af37; }
.store-page--magazine-dark .cart-item__variant { background: rgba(245,238,220,.1); color: #f5eedc; }
.store-page--noir .cart-item__variant { background: rgba(255,255,255,.08); color: #fafafa; }
.cart-item__qty { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.cart-item__qty button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-color); background: #fff; font-weight: 700; font-size: 16px; }
.cart-item__remove { background: none; border: none; color: var(--text-muted); font-size: 22px; cursor: pointer; padding: 4px; }

.cart-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,0.55); backdrop-filter: blur(2px); z-index: 55; }

/* =====================================================================
   DASHBOARD — Bold redesign with dark sidebar
   ===================================================================== */
.dash-body {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  grid-template-areas: "sidebar header" "sidebar main";
  min-height: 100vh;
  background: var(--bg-app);
}

.dash-sidebar {
  grid-area: sidebar;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex; flex-direction: column;
  padding: 20px 14px;
  gap: 4px;
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); z-index: 100;
  height: 100vh; overflow-y: auto;
}
.dash-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; color: #fff;
  padding: 8px 12px; margin-bottom: 18px;
}
.dash-brand .brand-name { font-size: 15px; letter-spacing: -0.01em; }
.dash-brand em { color: #a5b4fc; font-style: normal; font-size: 11px; margin-left: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }

.dash-nav { display: grid; gap: 2px; flex: 1; }
.dash-nav__link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-md);
  color: var(--sidebar-text); font-size: 14px; font-weight: 500;
  transition: all .15s; position: relative;
}
.dash-nav__link:hover {
  background: var(--sidebar-bg-active);
  color: var(--sidebar-text-active);
  text-decoration: none;
}
.dash-nav__link.is-active {
  background: linear-gradient(135deg, rgba(37,99,235,0.18), rgba(99,102,241,0.18));
  color: var(--sidebar-text-active);
  box-shadow: inset 0 0 0 1px rgba(99,102,241,0.4);
}
.dash-nav__link.is-active::before {
  content: ''; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px;
  background: linear-gradient(180deg, #2563eb, #6366f1); border-radius: 0 4px 4px 0;
}
.dash-sidebar--admin .dash-nav__link.is-active {
  background: linear-gradient(135deg, rgba(99,102,241,0.25), rgba(139,92,246,0.25));
  box-shadow: inset 0 0 0 1px rgba(139,92,246,0.5);
}
.dash-sidebar--admin .dash-nav__link.is-active::before { background: linear-gradient(180deg, #6366f1, #8b5cf6); }

/* Secciones agrupadas en el sidebar admin */
.dash-nav__section {
  display: grid; gap: 2px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.dash-nav__section:first-of-type {
  margin-top: 8px;
  border-top: 0;
  padding-top: 0;
}
.dash-nav__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: rgba(165, 180, 252, 0.75);
  padding: 0 12px 6px;
  user-select: none;
}
.dash-nav__link {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
}

.dash-logout { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--sidebar-border); }
.dash-logout .btn--ghost {
  width: 100%; justify-content: flex-start; gap: 12px; padding: 10px 12px;
  color: var(--sidebar-text); border: none; background: transparent;
}
.dash-logout .btn--ghost:hover { background: var(--sidebar-bg-active); color: #fca5a5; }

.dash-header {
  grid-area: header;
  background: #fff; border-bottom: 1px solid var(--border-color);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 28px; box-shadow: var(--shadow-sm);
  position: sticky; top: 0; z-index: 20;
}
.dash-header__title { margin: 0; font-size: 16px; font-weight: 700; }
.dash-header__right { display: flex; align-items: center; gap: 14px; }
.dash-user {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-primary); font-size: 13px; font-weight: 600;
  background: var(--bg-tertiary); padding: 8px 14px; border-radius: var(--radius-pill);
}

.store-switcher { display: flex; align-items: center; gap: 12px; }
.store-switcher__label { font-size: 12px; color: var(--text-muted); margin: 0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.store-switcher select {
  padding: 8px 14px; padding-right: 32px; min-width: 220px;
  background: var(--bg-tertiary); border: 1px solid var(--border-color); cursor: pointer;
  font-weight: 600;
}

.dash-main {
  grid-area: main; padding: 32px 32px 48px; max-width: 1320px; width: 100%;
}

/* Page header */
.page-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  margin-bottom: 28px; flex-wrap: wrap;
}
.page-head h1 { margin: 0 0 4px; font-size: 28px; font-weight: 800; }
.page-head__actions { display: flex; gap: 10px; }

/* Metrics grid */
.metrics-grid {
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 28px;
}
.metric-card {
  background: #fff; border-radius: var(--radius-lg); padding: 22px;
  box-shadow: var(--shadow-card); border: 1px solid var(--border-color);
  position: relative; overflow: hidden; transition: all .2s;
}
.metric-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #2563eb, #6366f1);
  opacity: 0; transition: opacity .2s;
}
.metric-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.metric-card:hover::before { opacity: 1; }
.metric-card__label { display: block; color: var(--text-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.metric-card__value, .metric-card strong {
  display: block; margin-top: 8px; font-size: 30px; font-weight: 800;
  background: linear-gradient(135deg, #2563eb, #6366f1);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.metric-card--admin::before { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.metric-card--admin strong, .metric-card--admin .metric-card__value {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Quick actions */
.quick-actions h2 { margin-bottom: 14px; font-size: 18px; font-weight: 700; }
.quick-actions__grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.quick-card {
  background: #fff; border-radius: var(--radius-lg); padding: 20px;
  border: 1px solid var(--border-color); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 6px; color: var(--text-primary);
  transition: all .2s; font-size: 14px;
}
.quick-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; border-color: var(--color-primary); }
.quick-card strong { font-weight: 700; font-size: 15px; }
.quick-card span { color: var(--text-muted); font-size: 13px; }

/* Tables */
.table {
  background: #fff; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-card); border: 1px solid var(--border-color);
}
.table th, .table td { padding: 14px 18px; text-align: left; font-size: 14px; vertical-align: middle; }
.table thead th {
  background: var(--bg-secondary); color: var(--text-secondary);
  font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border-color);
}
.table tbody tr { transition: background .12s; border-bottom: 1px solid var(--border-color); }
.table tbody tr:last-child { border-bottom: none; }
.table tbody tr:hover { background: var(--bg-secondary); }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.thumb { width: 44px; height: 44px; border-radius: var(--radius-sm); object-fit: cover; }
.thumb--empty { background: linear-gradient(135deg, #dbeafe, #d1fae5); display: inline-block; }

.filter-bar {
  display: flex; gap: 12px; align-items: end; padding: 18px;
  margin-bottom: 18px; background: #fff;
  border-radius: var(--radius-lg); border: 1px solid var(--border-color);
  box-shadow: var(--shadow-card);
}

.cat-list { display: grid; gap: 8px; margin-top: 16px; }
.cat-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; background: var(--bg-secondary); border-radius: var(--radius-md);
  border: 1px solid var(--border-color); font-weight: 500;
}

/* Trial banner */
.trial-banner {
  background: linear-gradient(135deg, #dbeafe, #e0e7ff);
  color: #1e3a8a; padding: 14px 20px; border-radius: var(--radius-md);
  margin-bottom: 20px; font-size: 14px; font-weight: 500;
  border: 1px solid #bfdbfe; box-shadow: var(--shadow-card);
}
.trial-banner--warn    { background: linear-gradient(135deg, #ffedd5, #fed7aa); color: #9a3412; border-color: #fdba74; }
.trial-banner--expired { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #991b1b; border-color: #fca5a5; }
.trial-banner a { font-weight: 700; }

/* ═══════════════════════════════════════════════
   Billing — Card de contacto al admin (cuando MP falla)
   ═══════════════════════════════════════════════ */
.billing-contact-card {
  display: flex; gap: 20px; align-items: flex-start;
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border: 2px solid #86efac;
  padding: 24px;
  margin: 16px 0 24px;
  border-radius: 16px;
  animation: fadeUp .35s ease both;
}
.billing-contact-card__ico {
  flex-shrink: 0;
  width: 56px; height: 56px;
  background: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 12px rgba(34,197,94,.15);
}
.billing-contact-card__body { flex: 1; min-width: 0; }
.billing-contact-card__title {
  margin: 0 0 8px; font-size: 17px; font-weight: 800; color: #14532d;
}
.billing-contact-card__msg {
  margin: 0 0 16px; color: #166534; line-height: 1.5; font-size: 14px;
}
.billing-contact-card__msg strong { color: #14532d; }
.billing-contact-card__btn {
  background: #25d366;
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  display: inline-flex; align-items: center;
  text-decoration: none;
  transition: transform .12s, box-shadow .15s, background .15s;
  box-shadow: 0 4px 14px rgba(37,211,102,.35);
}
.billing-contact-card__btn:hover {
  background: #128c7e;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37,211,102,.45);
}
.billing-contact-card__hint {
  display: block; margin-top: 12px;
  color: #166534; font-size: 12px; font-style: italic;
}
@media (max-width: 640px) {
  .billing-contact-card { flex-direction: column; padding: 20px; }
  .billing-contact-card__ico { width: 48px; height: 48px; font-size: 24px; }
  .billing-contact-card__btn { width: 100%; justify-content: center; }
}

/* Onboarding */
.onboarding { display: grid; place-items: center; padding: 80px 20px; }
.onboarding__card {
  background: #fff; padding: 56px 44px; border-radius: var(--radius-xl);
  text-align: center; max-width: 500px; box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
}
.onboarding__card h1 { margin: 18px 0 12px; font-size: 28px; }
.onboarding__card .badge { margin-bottom: 8px; }

/* Error shell */
.error-shell { min-height: 100vh; display: grid; place-items: center; gap: 20px; text-align: center; padding: 40px; background: var(--bg-gradient-soft); }

/* ---------- Mobile responsive ---------- */
@media (max-width: 880px) {
  .dash-body {
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-h) auto 1fr;
    grid-template-areas: "header" "sidebar" "main";
  }
  .dash-sidebar {
    flex-direction: row; overflow-x: auto; overflow-y: hidden;
    padding: 8px 12px; gap: 4px; height: auto; position: static;
  }
  .dash-brand, .dash-logout { display: none; }
  .dash-nav { grid-auto-flow: column; grid-auto-columns: max-content; }
  .dash-nav__link span { display: none; }
  .dash-nav__link { padding: 10px 12px; font-size: 18px; }
  .dash-nav__link.is-active::before { display: none; }
  .dash-main { padding: 20px; }
  .store-switcher select { min-width: 160px; }
}
@media (max-width: 480px) {
  .form--inline { flex-direction: column; align-items: stretch; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .page-head { flex-direction: column; align-items: stretch; }
  .dash-header { padding: 0 16px; }
}

/* =====================================================================
   NEW COMPONENTS — uploader, palette, preview, modal, list view, chart
   ===================================================================== */

/* Uploader */
.uploader {
  display: flex; flex-direction: column; gap: 10px;
  max-width: 280px;           /* cap overall width in wide forms */
}
.uploader__preview {
  width: 100%;
  max-width: 280px;
  height: 200px;
  background: var(--bg-tertiary); border: 1.5px dashed var(--border-color);
  border-radius: var(--radius-md); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.uploader__preview--wide { aspect-ratio: 16/6; height: auto; max-height: 120px; max-width: 100%; }
.uploader__preview--square { aspect-ratio: 1/1; height: auto; max-height: 200px; }
.uploader__preview img { width: 100%; height: 100%; object-fit: cover; }
.uploader__placeholder { color: var(--text-muted); font-size: 13px; }

/* Background removal decision modal */
.bgrm-modal__card {
  background: #fff; border-radius: 24px;
  padding: 36px 32px 28px;
  width: min(480px, 96vw);
  max-height: 90vh; overflow-y: auto;
  position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1);
}
.bgrm-modal__close {
  position: absolute; top: 14px; right: 14px;
  background: #f1f5f9; color: #64748b; border: none;
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.bgrm-modal__close:hover { background: #e2e8f0; color: #0f172a; transform: rotate(90deg); }
.bgrm-modal__card h2 {
  margin: 0 0 8px; font-size: 20px; text-align: center;
  background: linear-gradient(90deg,#a855f7,#ec4899);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bgrm-modal__card > p.muted { text-align: center; font-size: 13px; margin: 0 0 18px; }
.bgrm-modal__preview {
  padding: 14px;
  background: repeating-conic-gradient(#f3f4f6 0% 25%, #fff 0% 50%) 50% 50%/18px 18px;
  border-radius: 14px; margin-bottom: 18px;
  text-align: center;
  border: 1px solid #e5e7eb;
}
.bgrm-modal__preview img {
  max-width: 100%; max-height: 260px; object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.bgrm-modal__actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.bgrm-modal__actions .btn { padding: 14px; height: auto; flex-direction: column; gap: 4px; }
.bgrm-modal__progress {
  margin-top: 14px;
  padding: 12px 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  color: #1e40af; font-size: 13px; font-weight: 600;
  text-align: center;
  animation: pulse-soft 1.2s ease-in-out infinite;
}

@media (max-width: 480px) {
  .bgrm-modal__card { padding: 24px 20px 18px; }
  .bgrm-modal__actions { grid-template-columns: 1fr; }
}

/* Background removal toggle — optional per upload */
.uploader__bgrm {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #faf5ff, #fce7f3);
  border: 1.5px dashed #e9d5ff;
  border-radius: 10px;
  cursor: pointer; font-size: 13px; font-weight: 600;
  color: #6b21a8;
  transition: all .18s; flex-direction: row;
  user-select: none;
}
.uploader__bgrm:hover { background: linear-gradient(135deg, #f3e8ff, #fbcfe8); border-color: #a855f7; }
.uploader__bgrm:has(input:checked) {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  border-color: #7c3aed; border-style: solid;
  box-shadow: 0 4px 12px rgba(168,85,247,0.3);
}
.uploader__bgrm:has(input:checked) span::before { content: '✓ '; }
.uploader__bgrm input {
  width: 18px; height: 18px; margin: 0;
  accent-color: #a855f7; flex-shrink: 0;
}
.uploader__bgrm span { flex: 1; }

.uploader__progress {
  display: block;
  padding: 10px 14px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  color: #1e40af; font-size: 13px; font-weight: 600;
  animation: pulse-soft 1.2s ease-in-out infinite;
}

/* Hint shown above each uploader with recommended dimensions */
.uploader__hint {
  margin: 4px 0 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #eff6ff, #ecfdf5);
  border: 1px solid #dbeafe;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #1e40af;
}
.uploader__hint strong { color: #1e3a8a; }

/* Theme picker (catalog themes) */
.theme-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 14px;
}
.theme-card {
  cursor: pointer; display: flex; flex-direction: column; gap: 8px;
  padding: 10px;
  background: #fff;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  transition: all .18s;
}
.theme-card input { display: none; }
.theme-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.theme-card.is-active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.12), var(--shadow-md);
}

.theme-card__preview {
  height: 90px; border-radius: 10px; overflow: hidden;
  position: relative;
}
.theme-card__bar { height: 8px; }
.theme-card__body { display: flex; gap: 8px; padding: 10px; align-items: center; }
.theme-card__dot { width: 22px; height: 22px; border-radius: 50%; }
.theme-card__lines { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.theme-card__lines span { display: block; height: 4px; border-radius: 2px; }
.theme-card__lines span:first-child { width: 60%; }
.theme-card__lines span:last-child  { width: 85%; }
.theme-card__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 0 10px; }
.theme-card__grid i { display: block; height: 14px; border-radius: 3px; }

/* 🌑 OBSIDIAN preview */
.theme-card__preview--dark {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(37,99,235,0.25), transparent 50%),
    linear-gradient(180deg, #0a0e1a, #06080f);
}
.theme-card__preview--dark .theme-card__bar { background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.06); }
.theme-card__preview--dark .theme-card__dot { background: linear-gradient(135deg,#2563eb,#6366f1); box-shadow: 0 0 12px rgba(37,99,235,0.5); }
.theme-card__preview--dark .theme-card__lines span { background: rgba(255,255,255,0.28); border-radius: 3px; }
.theme-card__preview--dark .theme-card__grid i {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
}

/* ☀ PORCELAIN preview */
.theme-card__preview--light {
  background: #ffffff;
  border: 1px solid #e2e8f0;
}
.theme-card__preview--light .theme-card__bar { background: #0f172a; }
.theme-card__preview--light .theme-card__dot { background: #2563eb; }
.theme-card__preview--light .theme-card__lines span { background: #cbd5e1; border-radius: 3px; }
.theme-card__preview--light .theme-card__grid i {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
}

/* 🌈 AURORA preview */
.theme-card__preview--vibrant {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(236,72,153,0.55), transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(139,92,246,0.45), transparent 55%),
    linear-gradient(180deg, #1a0940, #0a0520);
}
.theme-card__preview--vibrant .theme-card__bar {
  background: linear-gradient(90deg, #ec4899, #8b5cf6);
  box-shadow: 0 2px 8px rgba(236,72,153,0.4);
}
.theme-card__preview--vibrant .theme-card__dot {
  background: linear-gradient(135deg, #ec4899, #f59e0b);
  box-shadow: 0 0 14px rgba(236,72,153,0.7);
}
.theme-card__preview--vibrant .theme-card__lines span { background: rgba(255,255,255,0.4); border-radius: 3px; }
.theme-card__preview--vibrant .theme-card__grid i {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  border-radius: 3px;
}

/* 🍷 INTIMATE preview */
.theme-card__preview--intimate {
  background: linear-gradient(180deg, #2a0815, #000);
}
.theme-card__preview--intimate .theme-card__bar { background: linear-gradient(90deg, #9f1239, #be123c); }
.theme-card__preview--intimate .theme-card__dot { background: #fda4af; box-shadow: 0 0 10px rgba(253,164,175,0.5); }
.theme-card__preview--intimate .theme-card__lines span { background: rgba(255,255,255,0.3); border-radius: 2px; }
.theme-card__preview--intimate .theme-card__grid i { background: rgba(255,255,255,0.04); border-radius: 8px; border: 1px solid rgba(190,18,60,0.3); }

/* ⚡ EXPRESS preview */
.theme-card__preview--express {
  background: #f8fafc;
}
.theme-card__preview--express .theme-card__bar { background: #3b82f6; border-radius: 0 0 10px 10px; margin: 0 4px; height: 12px; }
.theme-card__preview--express .theme-card__dot { border-radius: 6px; background: #fbbf24; }
.theme-card__preview--express .theme-card__lines span { background: #e2e8f0; border-radius: 4px; }
.theme-card__preview--express .theme-card__grid i { background: #fff; border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

/* 💎 MINIMAL preview */
.theme-card__preview--minimal {
  background: #ffffff; border: 1px solid #f1f5f9;
}
.theme-card__preview--minimal .theme-card__bar { display: none; }
.theme-card__preview--minimal .theme-card__dot { background: #000; }
.theme-card__preview--minimal .theme-card__lines span { background: #e2e8f0; border-radius: 0; height: 2px; }
.theme-card__preview--minimal .theme-card__grid i { background: #fff; border-radius: 0; border: 1px solid #e2e8f0; }

.theme-card__info strong { display: block; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.theme-card__info small { color: var(--text-muted); font-size: 11px; }

@media (max-width: 720px) {
  .theme-picker { grid-template-columns: 1fr; }
}

/* Shade slider (intensity) */
.shade-slider {
  margin-top: 14px; padding: 16px 18px;
  background: var(--bg-secondary);
  border-radius: 12px;
}
.shade-slider__label {
  display: block;
  color: var(--text-muted);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.shade-slider__control {
  display: flex; align-items: center; gap: 10px;
}
.shade-slider__icon { font-size: 20px; }

.shade-slider input[type=range] {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, #f1f5f9 0%, #64748b 50%, #0f172a 100%);
  outline: none; cursor: pointer;
  padding: 0; border: none;
}
.shade-slider input[type=range]:focus { box-shadow: none; outline: none; }
.shade-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff;
  border: 3px solid var(--color-primary);
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(37,99,235,0.35);
  transition: transform .1s;
}
.shade-slider input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.shade-slider input[type=range]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 3px solid var(--color-primary); cursor: pointer;
}

.shade-slider__ticks {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  margin-top: 10px;
}
.shade-slider__ticks span {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: all .15s;
}
.shade-slider__ticks span:first-child { text-align: left; }
.shade-slider__ticks span:last-child  { text-align: right; }
.shade-slider__ticks span:hover { color: var(--text-primary); }
.shade-slider__ticks span.is-active {
  color: var(--color-primary);
  font-weight: 800;
}

/* =====================================================================
   THEME SHADE variants applied to the storefront
   ===================================================================== */
/* DARK theme shades */
.store-page--dark.store-page--shade-soft  { background: #1f2937 !important; }  /* slate lighter */
.store-page--dark.store-page--shade-medium { background: #0a0e1a; }              /* default */
.store-page--dark.store-page--shade-deep  { background: #000000 !important; }  /* pitch black */

/* LIGHT theme shades — Porcelain rediseñado minimalista estilo Empresy */
/* Fondo blanco limpio con sutil variación por intensidad */
.store-page--light.store-page--shade-soft {
  background: #ffffff !important;
}
.store-page--light.store-page--shade-medium {
  background: #fafbfc !important;
}
.store-page--light.store-page--shade-deep {
  background: #f3f4f6 !important;
  color: #0f172a;
}
.store-page--light.store-page--shade-soft,
.store-page--light.store-page--shade-medium,
.store-page--light.store-page--shade-deep {
  background-attachment: fixed !important;
}
/* Product cards — blanco puro con sombra sutil, sin blur (más profesional) */
.store-page--light .product-card {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid #f1f5f9 !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 1px 2px rgba(15,23,42,0.03) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.store-page--light .product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(15,23,42,0.08), 0 4px 10px rgba(15,23,42,0.04) !important;
  border-color: #e2e8f0 !important;
}

/* VIBRANT theme shades */
.store-page--vibrant.store-page--shade-soft {
  background:
    radial-gradient(ellipse at 20% 10%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 60%),
    radial-gradient(ellipse at 80% 90%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 55%),
    linear-gradient(180deg, #2d1f4a, #1a1330) !important;
}
.store-page--vibrant.store-page--shade-deep {
  background:
    radial-gradient(ellipse at 20% 10%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 60%),
    radial-gradient(ellipse at 80% 90%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 55%),
    linear-gradient(180deg, #0a0520, #000) !important;
}

/* INTIMATE theme shades */
.store-page--intimate.store-page--shade-soft { background: #3f091c !important; }
.store-page--intimate.store-page--shade-medium { background: #2a0815 !important; }
.store-page--intimate.store-page--shade-deep { background: #110208 !important; color: #fff; }

/* EXPRESS theme shades */
.store-page--express.store-page--shade-soft { background: #f1f5f9 !important; color: #0f172a; }
.store-page--express.store-page--shade-medium { background: #f8fafc !important; color: #0f172a; }
.store-page--express.store-page--shade-deep { background: #e2e8f0 !important; color: #0f172a; }

/* MINIMAL theme shades */
.store-page--minimal.store-page--shade-soft,
.store-page--minimal.store-page--shade-medium,
.store-page--minimal.store-page--shade-deep { background: #ffffff !important; color: #000; }
/* =====================================================================
   STRUCTURAL THEME OVERRIDES (INTIMATE, EXPRESS, MINIMAL)
   ===================================================================== */

/* 🍷 INTIMATE THEME OVERRIDES */
.store-page--intimate { font-family: "Playfair Display", Georgia, serif; color: #fff; }
.store-page--intimate .banner__title { font-weight: 400; font-style: italic; letter-spacing: 0.05em; color: #fff; }
.store-page--intimate .product-card { background: rgba(20, 2, 8, 0.4); border: 1px solid rgba(255, 255, 255, 0.05); backdrop-filter: blur(8px); border-radius: 8px; color: #fff; }
.store-page--intimate .product-card__name { font-weight: 400; font-size: 16px; color: #fda4af; }
.store-page--intimate .product-card__price strong { color: #fff; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 300; }
.store-page--intimate .product-card__add { background: #be123c; color: #fff; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; border: none; }
.store-page--intimate .header { background: rgba(42, 8, 21, 0.95); border-bottom: 1px solid rgba(190, 18, 60, 0.2); }
.store-page--intimate .category-tabs__tab.is-active { background: #be123c; color: #fff; border-color: #be123c; }
.store-page--intimate .category-tabs__tab { color: #fda4af; border-color: rgba(253, 164, 175, 0.2); }

/* ⚡ EXPRESS THEME OVERRIDES */
.store-page--express { font-family: "Plus Jakarta Sans", sans-serif; }
.store-page--express .header { border-radius: 0 0 20px 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); background: #ffffff; border: none; }
.store-page--express .product-card { background: #ffffff; border-radius: 20px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); border: none; transition: transform 0.2s; }
.store-page--express .product-card:hover { transform: translateY(-4px); }
.store-page--express .product-card__media { border-radius: 20px 20px 0 0; }
.store-page--express .product-card__add { background: var(--accent); color: #fff; border-radius: 12px; font-weight: 800; font-size: 13px; padding: 10px 14px; box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent); border: none; }
.store-page--express .product-card__name { font-weight: 800; font-size: 15px; color: #0f172a; }
.store-page--express .product-card__price strong { color: var(--accent); font-size: 18px; }
.store-page--express .category-tabs__tab.is-active { background: var(--accent); color: #fff; border-radius: 12px; border: none; }
.store-page--express .category-tabs__tab { border-radius: 12px; border: 1px solid #e2e8f0; }

/* 💎 MINIMAL THEME OVERRIDES */
.store-page--minimal { font-family: 'Inter', "Plus Jakarta Sans", sans-serif; }
.store-page--minimal .header { background: #fff; border-bottom: 2px solid #000; }
.store-page--minimal .product-card { background: transparent; border: none; border-radius: 0; box-shadow: none; }
.store-page--minimal .product-card__media { border-radius: 0; }
.store-page--minimal .product-card__name { text-transform: uppercase; font-weight: 400; letter-spacing: 0.05em; color: #000; font-size: 13px; margin-top: 4px; }
.store-page--minimal .product-card__price strong { color: #000; font-weight: 600; }
.store-page--minimal .product-card__add { background: transparent; border: 1px solid #000; color: #000; border-radius: 0; text-transform: uppercase; font-weight: 600; font-size: 11px; letter-spacing: 0.05em; }
.store-page--minimal .product-card__add:hover { background: #000; color: #fff; }
.store-page--minimal .category-tabs__tab.is-active { background: transparent; color: #000; border-bottom: 2px solid #000; border-radius: 0; box-shadow: none; border-top: none; border-left: none; border-right: none; }
.store-page--minimal .category-tabs__tab { border: none; border-radius: 0; color: #64748b; }

/* Bigger QR for catalog sharing */
.share-modal__qr--big { padding: 24px; }
.share-modal__qr--big img { width: 240px; height: 240px; }

.share-btn--email { background: #6b7280; }

/* Palette picker */
.palette-picker { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.palette-swatch {
  width: 36px; height: 36px; border-radius: 50%; border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--border-color), var(--shadow-sm);
  cursor: pointer; transition: transform .15s, box-shadow .15s; padding: 0;
}
.palette-swatch:hover { transform: scale(1.1); }
.palette-swatch.is-active { box-shadow: 0 0 0 2px var(--text-primary), 0 4px 12px rgba(0,0,0,0.15); }
.palette-custom { display: inline-flex; align-items: center; }
.palette-custom input[type="color"] {
  width: 40px; height: 40px; padding: 0; border: 2px dashed var(--border-strong);
  border-radius: 50%; cursor: pointer;
}

/* Store form layout — preview side panel */
.store-form-grid {
  display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start;
}
.store-preview { position: sticky; top: 88px; }
.store-preview h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 12px; }

.preview-phone {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  --preview-accent: #2563eb;
  transition: all .35s cubic-bezier(.4,0,.2,1);
}

/* Obsidian (dark) */
.preview-phone--dark {
  background:
    radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--preview-accent) 18%, transparent), transparent 55%),
    linear-gradient(180deg, #0a0e1a, #06080f);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
}
.preview-phone--dark .preview-name { color: #fff; }
.preview-phone--dark .preview-welcome { color: rgba(255,255,255,0.6); }

/* Porcelain (light) */
.preview-phone--light {
  background: #faf8f5;
  border: 1px solid #e8e3d9;
  color: #1a1a1a;
}
.preview-phone--light .preview-promo { background: #1a1a1a; color: #fff; }
.preview-phone--light .preview-name {
  color: #1a1a1a;
  font-weight: 300;
  letter-spacing: 0.04em;
}
.preview-phone--light .preview-welcome { color: #6b6b6b; font-style: italic; font-weight: 300; }
.preview-phone--light .preview-cta { background: #1a1a1a; }

/* Aurora (vibrant) */
.preview-phone--vibrant {
  background:
    radial-gradient(ellipse at 20% 10%, color-mix(in srgb, var(--preview-accent) 50%, transparent), transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(236,72,153,0.4), transparent 55%),
    linear-gradient(180deg, #1a0940, #0a0520);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
}
.preview-phone--vibrant .preview-promo {
  background: linear-gradient(135deg, var(--preview-accent), #ec4899);
  color: #fff;
}
.preview-phone--vibrant .preview-name {
  background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--preview-accent) 50%, #fff));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.preview-phone--vibrant .preview-welcome { color: rgba(255,255,255,0.7); }
.preview-phone--vibrant .preview-cta {
  background: linear-gradient(135deg, var(--preview-accent), #ec4899);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--preview-accent) 40%, transparent);
}

/* Intimate */
.preview-phone--intimate { background: #2a0815; color: #fff; border: 1px solid rgba(255,255,255,0.05); }
.preview-phone--intimate .preview-promo { background: linear-gradient(90deg, #9f1239, #be123c); }
.preview-phone--intimate .preview-name { font-family: "Playfair Display", serif; font-weight: 400; color: #fda4af; }
.preview-phone--intimate .preview-cta { background: #be123c; border-radius: 6px; }

/* Express */
.preview-phone--express { background: #f8fafc; color: #0f172a; border: 1px solid #e2e8f0; }
.preview-phone--express .preview-promo { background: var(--preview-accent); border-radius: 0 0 12px 12px; margin: 0 8px; }
.preview-phone--express .preview-logo { border-radius: 12px; background: #fff; border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.08); outline: none; }
.preview-phone--express .preview-cta { background: var(--preview-accent); border-radius: 10px; font-weight: 800; }

/* Minimal */
.preview-phone--minimal { background: #fff; color: #000; border: 1px solid #f1f5f9; box-shadow: 0 10px 30px rgba(0,0,0,0.04); }
.preview-phone--minimal .preview-promo { display: none; }
.preview-phone--minimal .preview-logo { border: none; box-shadow: none; outline: none; border-radius: 0; border-bottom: 2px solid #000; margin-top: 10px; }
.preview-phone--minimal .preview-name { font-weight: 300; letter-spacing: 0.1em; text-transform: uppercase; }
.preview-phone--minimal .preview-cta { background: transparent; border: 1px solid #000; color: #000; border-radius: 0; }

/* Shared */
.preview-promo {
  background: var(--preview-accent); color: #fff; text-align: center;
  font-size: 12px; padding: 8px; font-weight: 600;
  transition: all .35s;
}
.preview-banner {
  height: 100px; background-color: rgba(148,163,184,0.15); background-size: cover; background-position: center;
}
.preview-logo {
  width: 64px; height: 64px; border-radius: 50%; background: #fff;
  margin: -32px auto 8px; display: flex; align-items: center; justify-content: center;
  border: 4px solid #fff; box-shadow: var(--shadow-md);
  outline: 3px solid var(--preview-accent); outline-offset: 2px;
  color: var(--preview-accent); font-weight: 800; font-size: 26px; overflow: hidden;
}
.preview-logo img { width: 100%; height: 100%; object-fit: cover; }
.preview-name { text-align: center; margin: 4px 12px; font-weight: 800; font-size: 18px; }
.preview-welcome { text-align: center; font-size: 12px; margin: 0 16px 16px; line-height: 1.4; }
.preview-cta {
  display: block; margin: 0 auto 20px; padding: 10px 24px; background: var(--preview-accent);
  color: #fff; border: none; border-radius: var(--radius-pill); font-weight: 600; cursor: pointer;
  transition: all .35s;
}

/* =====================================================================
   Preview phones para los 9 temas nuevos
   ===================================================================== */
.preview-phone--pure { background:#fff; color:#0f172a; border:1px solid #f1f5f9; box-shadow:0 10px 30px rgba(15,23,42,.06); }
.preview-phone--pure .preview-promo { background:#0f172a; color:#fff; }
.preview-phone--pure .preview-cta { background:#0f172a; color:#fff; }

.preview-phone--magazine-light { background:#fbf8f3; color:#1f1a14; border:1px solid #e8dfd1; }
.preview-phone--magazine-light .preview-name { font-family:'Playfair Display',serif; font-weight:500; }
.preview-phone--magazine-light .preview-promo { background:#1f1a14; color:#fbf8f3; letter-spacing:.1em; text-transform:uppercase; font-size:11px; }
.preview-phone--magazine-light .preview-cta { background:#1f1a14; border-radius:2px; text-transform:uppercase; letter-spacing:.12em; font-size:11px; }

.preview-phone--aurora-light {
  background:
    radial-gradient(ellipse at 10% 0%,  color-mix(in srgb, var(--preview-accent) 25%, transparent), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(236,72,153,.22), transparent 55%),
    linear-gradient(180deg, #fdf4ff, #fef9ff);
  color:#3b1a4a; border:1px solid rgba(236,72,153,.15);
}
.preview-phone--aurora-light .preview-promo { background: linear-gradient(135deg, var(--preview-accent), #ec4899); color:#fff; }
.preview-phone--aurora-light .preview-name { background: linear-gradient(90deg, #3b1a4a, var(--preview-accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-weight:800; }
.preview-phone--aurora-light .preview-cta { background: linear-gradient(135deg, var(--preview-accent), #ec4899); box-shadow: 0 6px 16px color-mix(in srgb, var(--preview-accent) 35%, transparent); }

.preview-phone--warm { background:#f5efe6; color:#2a241c; border:1px solid #e6dbc8; }
.preview-phone--warm .preview-promo { background:#7c5a2b; color:#fff; }
.preview-phone--warm .preview-cta { background:#7c5a2b; }

.preview-phone--botanical { background:#eef3ec; color:#1f2d1f; border:1px solid #cedcc8; }
.preview-phone--botanical .preview-name { font-family:'Playfair Display',serif; font-weight:500; }
.preview-phone--botanical .preview-promo { background:#3d6b3d; color:#f5f8f3; }
.preview-phone--botanical .preview-cta { background:#3d6b3d; border-radius:10px; }

.preview-phone--glassmorph {
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--preview-accent) 25%, transparent), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(14,165,233,.25), transparent 55%),
    linear-gradient(135deg, #e0e7ff, #c7d2fe);
  color:#1e1b4b; border:1px solid rgba(255,255,255,.5);
}
.preview-phone--glassmorph .preview-promo { background: rgba(30,27,75,.85); color:#fff; backdrop-filter: blur(10px); }
.preview-phone--glassmorph .preview-cta { background: rgba(30,27,75,.9); border-radius:14px; backdrop-filter: blur(10px); }

.preview-phone--noir { background:#000; color:#fafafa; border:1px solid rgba(255,255,255,.1); }
.preview-phone--noir .preview-name { font-weight:300; letter-spacing:.04em; }
.preview-phone--noir .preview-promo { background:#fafafa; color:#000; }
.preview-phone--noir .preview-cta { background:#fafafa; color:#000; border-radius:8px; }

.preview-phone--magazine-dark { background:#1a1612; color:#f5eedc; border:1px solid rgba(245,238,220,.1); }
.preview-phone--magazine-dark .preview-name { font-family:'Playfair Display',serif; font-weight:400; font-style:italic; color:#f5eedc; }
.preview-phone--magazine-dark .preview-promo { background:rgba(245,238,220,.1); color:#f5eedc; letter-spacing:.12em; text-transform:uppercase; font-size:11px; }
.preview-phone--magazine-dark .preview-cta { background:#f5eedc; color:#1a1612; border-radius:2px; text-transform:uppercase; letter-spacing:.14em; font-size:11px; }

.preview-phone--luxury-gold {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212,175,55,.2), transparent 60%),
    linear-gradient(180deg, #0a0806, #000);
  color:#f5e6b8; border:1px solid rgba(212,175,55,.25);
}
.preview-phone--luxury-gold .preview-name { background: linear-gradient(90deg, #d4af37, #f5e6b8, #d4af37); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-weight:600; letter-spacing:.05em; }
.preview-phone--luxury-gold .preview-promo { background: linear-gradient(90deg, #d4af37, #a8842a); color:#0a0806; font-weight:700; letter-spacing:.1em; }
.preview-phone--luxury-gold .preview-cta { background: linear-gradient(135deg, #d4af37, #a8842a); color:#0a0806; border-radius:6px; text-transform:uppercase; letter-spacing:.1em; font-size:12px; font-weight:700; }

/* =====================================================================
   Selector v2: 2 pasos (luminosidad + estilo)
   ===================================================================== */
.theme-picker-v2 { display: flex; flex-direction: column; gap: 18px; }
.theme-picker-v2__step { display:flex; flex-direction:column; gap:10px; }
.theme-picker-v2__label { font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); font-weight:700; }
.theme-picker-v2__tabs { display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; }
.theme-picker-v2__tab {
  padding: 12px 8px; border:2px solid var(--border-color); background:var(--surface);
  border-radius: 12px; cursor:pointer; font-weight:600; font-size:13px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  transition: border-color .2s, background .2s, transform .12s;
  color: var(--text-primary);
}
.theme-picker-v2__tab:hover { border-color: var(--color-primary); transform: translateY(-1px); }
.theme-picker-v2__tab.is-active { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, var(--surface)); }
.theme-picker-v2__tab-ico { font-size:20px; line-height:1; }
.theme-picker-v2__tab-hint { font-size:11px; font-weight:500; color: var(--text-muted); }
.theme-picker-v2__grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
.theme-picker-v2__card {
  position:relative; border:2px solid var(--border-color); border-radius:12px; overflow:hidden;
  cursor:pointer; transition: border-color .2s, transform .15s; background:var(--surface);
}
.theme-picker-v2__card:hover { transform: translateY(-2px); border-color: var(--color-primary); }
.theme-picker-v2__card.is-active { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); }
.theme-picker-v2__card input { position:absolute; opacity:0; pointer-events:none; }
.theme-picker-v2__card-swatch { height:80px; display:block; }
.theme-picker-v2__card-info { padding:8px 10px; }
.theme-picker-v2__card-info strong { display:block; font-size:13px; color: var(--text-primary); }
.theme-picker-v2__card-info small { display:block; font-size:11px; color: var(--text-muted); line-height:1.3; }
/* Mini swatches — uno por cada tema nuevo (visual preview dentro del selector) */
.tps-pure          { background: linear-gradient(135deg, #ffffff, #f1f5f9); border-bottom:1px solid #e2e8f0; }
.tps-magazine-light{ background: linear-gradient(135deg, #fbf8f3, #ece4d4); border-bottom:1px solid #e8dfd1; }
.tps-aurora-light  { background: radial-gradient(ellipse at 20% 30%, #f472b6, transparent 60%), radial-gradient(ellipse at 80% 70%, #a78bfa, transparent 60%), linear-gradient(135deg, #fdf4ff, #fef9ff); }
.tps-warm          { background: linear-gradient(135deg, #f5efe6, #e6dbc8); }
.tps-botanical     { background: linear-gradient(135deg, #eef3ec, #d4e0cc); }
.tps-glassmorph    { background: radial-gradient(circle at 20% 20%, #c7d2fe, transparent 55%), radial-gradient(circle at 80% 80%, #bae6fd, transparent 55%), linear-gradient(135deg, #e0e7ff, #c7d2fe); }
.tps-noir          { background: linear-gradient(135deg, #000, #1a1a1a); border-bottom:1px solid rgba(255,255,255,.1); }
.tps-magazine-dark { background: linear-gradient(135deg, #1a1612, #2a241c); border-bottom:1px solid rgba(245,238,220,.08); }
.tps-luxury-gold   { background: radial-gradient(ellipse at 50% 30%, rgba(212,175,55,.35), transparent 60%), linear-gradient(135deg, #0a0806, #000); }

@media (max-width: 1100px) {
  .store-form-grid { grid-template-columns: 1fr; }
  .store-preview { position: static; max-width: 360px; margin: 0 auto; }
}

/* =====================================================================
   Product detail modal (pmodal) — MiCatálogo dark style
   ===================================================================== */
.pmodal {
  border: none; padding: 0; background: transparent;
  max-width: 94vw; max-height: 90vh;
  width: min(680px, 94vw);
}
/* Asegura que al cerrar el <dialog>, no quede consumiendo eventos del resto de la UI */
dialog.pmodal:not([open]) { display: none !important; pointer-events: none; }
/* Single-box compact modal: hide reviews/related inside the modal */
.pmodal__card .pmodal__reviews,
.pmodal__card .pmodal__related { display: none !important; }
.pmodal::backdrop { background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); }
.pmodal__card {
  background: #131929; color: #e2e8f0;
  border-radius: 16px;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-flow: dense;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  position: relative;
  max-height: 90vh;
}
/* Reviews and related products span BOTH columns (full width inside modal) */
.pmodal__card .pmodal__reviews,
.pmodal__card .pmodal__related {
  grid-column: 1 / -1;
  padding: 18px 22px 22px;
  margin-top: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 760px) {
  .pmodal {
    width: 94vw; max-width: 94vw;
    max-height: 90vh;
  }
  .pmodal__card {
    grid-template-columns: 1fr;
    max-height: 90vh;
  }
}
.pmodal__close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  background: rgba(15,23,42,0.85); border: none; color: #cbd5e1;
  font-size: 20px; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  transition: all .15s;
}
.pmodal__close:hover { background: rgba(255,255,255,0.18); color: #fff; }

.pmodal__media {
  position: relative;
  background: #0a1220;
  display: flex; align-items: center; justify-content: center;
  min-width: 0;
  overflow: hidden;
}
.pmodal__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.pmodal__body {
  padding: 28px 28px 24px;
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
  overflow-y: auto;
}
.pmodal__cat { color: #64748b; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.pmodal__name {
  color: #fff; font-size: 22px; font-weight: 800; margin: 0;
  letter-spacing: 0.02em; text-transform: uppercase;
  word-wrap: break-word;
  line-height: 1.15;
}
.pmodal__price { display: flex; align-items: baseline; gap: 10px; margin: 0; flex-wrap: wrap; }
.pmodal__price strong { color: var(--accent); font-size: 26px; font-weight: 800; }
.pmodal__compare { color: #475569; text-decoration: line-through; font-size: 15px; }
.pmodal__desc { color: #94a3b8; font-size: 13px; line-height: 1.5; margin: 0; }

/* Variant groups */
.pmodal__label { color: #64748b; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; display: block; margin-bottom: 6px; }
.pmodal__variants { display: grid; gap: 10px; }
.pmodal__vgroup { display: block; }
.pmodal__voptions { display: flex; flex-wrap: wrap; gap: 6px; }
.pmodal__vopt {
  background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.1);
  color: #cbd5e1; padding: 7px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; cursor: pointer; transition: all .15s;
}
.pmodal__vopt:hover { background: rgba(255,255,255,0.12); color: #fff; }
.pmodal__vopt.is-active {
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Quantity row */
.pmodal__qty-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; background: rgba(255,255,255,0.04);
  border-radius: 12px; margin-top: 2px;
}
.pmodal__qty { display: inline-flex; align-items: center; gap: 12px; }
.pmodal__qty button {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: none; color: #fff;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.pmodal__qty button:hover { background: var(--accent); }
.pmodal__qty span { color: #fff; font-weight: 800; font-size: 15px; min-width: 16px; text-align: center; }

/* Add to cart button */
.pmodal__add {
  background: var(--accent); color: #fff;
  border: none; border-radius: 999px;
  padding: 14px 20px; font-size: 12px; font-weight: 800;
  letter-spacing: 0.12em; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: transform .15s;
  margin-top: 4px;
  width: 100%;
}
.pmodal__add:hover { transform: translateY(-2px); }
.pmodal__add:disabled { background: #475569; cursor: not-allowed; box-shadow: none; transform: none; }

@media (max-width: 720px) {
  .pmodal {
    width: 94vw; max-width: 94vw;
    max-height: 90vh;
  }
  .pmodal__card {
    grid-template-columns: 1fr;
    max-height: 90vh;
    overflow: hidden;
  }
  .pmodal__media {
    aspect-ratio: 1/1;
    max-height: 50vh;
  }
  .pmodal__media img { object-fit: contain; background: #0a1220; }
  .pmodal__body { padding: 14px 16px 16px; gap: 8px; overflow-y: auto; }
  .pmodal__name { font-size: 16px; }
  .pmodal__price strong { font-size: 20px; }
  .pmodal__desc { font-size: 12px; }
  .pmodal__close {
    top: 8px; right: 8px;
    width: 32px; height: 32px; font-size: 18px;
  }
}

/* Modal gallery navigation */
.pmodal__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: #fff; border: none;
  font-size: 20px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 2; transition: all .15s;
}
.pmodal__nav:hover { background: var(--accent); }
.pmodal__nav--prev { left: 10px; }
.pmodal__nav--next { right: 10px; }
.pmodal__nav[hidden] { display: none; }
.pmodal__dots {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 2;
}
.pmodal__dots[hidden] { display: none; }
.pmodal__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.4); border: none; cursor: pointer; padding: 0;
  transition: all .15s;
}
.pmodal__dot.is-active { background: var(--accent); transform: scale(1.4); }

/* Variant builder (dashboard) */
.vbuilder {
  background: var(--bg-secondary);
  border: 1.5px dashed var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  display: grid; gap: 16px;
}
.vbuilder__empty {
  text-align: center; padding: 20px;
  color: var(--text-muted); font-size: 13px; font-style: italic;
  background: #fff; border: 1.5px dashed var(--border-color);
  border-radius: 10px;
}
.vbuilder__groups { display: grid; gap: 12px; }
.vbuilder__opthead {
  display: grid; grid-template-columns: 1fr 100px 100px 40px; gap: 8px;
  padding: 0 4px;
  color: var(--text-muted); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.vbuilder__group {
  background: #fff; border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 14px;
  display: grid; gap: 10px;
}
.vbuilder__ghead { display: flex; gap: 8px; align-items: center; }
.vbuilder__gname {
  flex: 1; padding: 10px 12px; border: 1.5px solid var(--border-color);
  border-radius: 8px; font-weight: 700; font-size: 14px;
}
.vbuilder__gname:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.vbuilder__gdel, .vbuilder__odel {
  background: transparent; border: 1px solid var(--border-color);
  width: 36px; height: 36px; border-radius: 8px;
  cursor: pointer; font-size: 14px; color: var(--text-muted);
  transition: all .15s; flex-shrink: 0;
}
.vbuilder__gdel:hover, .vbuilder__odel:hover {
  background: #fee2e2; color: #dc2626; border-color: #fca5a5;
}
.vbuilder__opts { display: grid; gap: 6px; }
.vbuilder__opt {
  display: grid; grid-template-columns: 1fr 100px 100px 40px;
  gap: 8px; align-items: center;
  animation: slideIn .2s ease-out;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.vbuilder__oname, .vbuilder__ostock, .vbuilder__oprice {
  padding: 8px 12px; border: 1.5px solid var(--border-color);
  border-radius: 8px; font-size: 14px;
}
.vbuilder__oname:focus, .vbuilder__ostock:focus, .vbuilder__oprice:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.vbuilder__addopt {
  background: transparent; border: 1.5px dashed var(--border-color);
  color: var(--text-secondary); padding: 8px 14px;
  border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.vbuilder__addopt:hover { background: var(--color-primary-light); color: var(--color-primary); border-color: var(--color-primary); border-style: solid; }

/* Preset chips row */
.vbuilder__presets {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 4px;
}
.vbuilder__presets-label {
  color: var(--text-muted);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-right: 4px;
}
.vbuilder__preset {
  background: #fff; border: 1.5px solid var(--border-color);
  color: var(--text-primary);
  padding: 8px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all .15s;
}
.vbuilder__preset:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary); color: var(--color-primary);
  transform: translateY(-1px);
}
.vbuilder__preset--custom {
  background: linear-gradient(135deg, #eef2ff, #ecfdf5);
  border-style: dashed;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.vbuilder__preset--custom:hover {
  background: var(--color-primary); color: #fff;
}

@media (max-width: 640px) {
  .vbuilder__opt { grid-template-columns: 1fr; }
  .vbuilder__opt .vbuilder__odel { width: 100%; }
}

/* Storefront modal variant with stock indicator */
.pmodal__vopt.is-out {
  opacity: 0.4; text-decoration: line-through; cursor: not-allowed;
}
.pmodal__vopt small { opacity: 0.7; font-weight: 500; margin-left: 4px; }
.pmodal__vopt-price {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.85em;
  opacity: 1 !important;
}
.pmodal__vopt.is-active .pmodal__vopt-price {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* Gallery uploader (dashboard) */
.gallery-uploader { display: flex; flex-direction: column; gap: 10px; max-width: 600px; }
.gallery-uploader__grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(90px, 100px));
}
.gallery-uploader__item {
  position: relative; aspect-ratio: 1/1;
  max-width: 100px;
  border-radius: var(--radius-md); overflow: hidden;
  border: 1.5px solid var(--border-color);
}
.gallery-uploader__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-uploader__remove {
  position: absolute; top: 6px; right: 6px;
  background: rgba(15,23,42,0.85); color: #fff;
  border: none; width: 32px; height: 32px; border-radius: 50%;
  font-size: 14px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.gallery-uploader__remove:hover { background: #ef4444; }

/* =====================================================================
   Toast notification
   ===================================================================== */
.toast {
  position: fixed; top: 80px; left: 50%;
  transform: translate(-50%, -20px);
  background: var(--accent, #dc2626);
  color: #fff;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.06em;
  z-index: 200;
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
  opacity: 0;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
}
.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* =====================================================================
   🍞 Storefront notices (.sn) — reemplaza alert() en catálogo público
   ===================================================================== */
.sn-stack {
  position: fixed;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
  max-width: 92vw;
}
.sn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px;
  background: rgba(15,23,42,0.95);
  color: #fff;
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  animation: snIn .3s cubic-bezier(.34,1.56,.64,1);
  pointer-events: auto;
}
.sn.is-leaving { animation: snOut .25s ease-in forwards; }
@keyframes snIn  { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes snOut { to   { opacity: 0; transform: translateY(-12px); } }
.sn__icon {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900;
}
.sn--success { background: linear-gradient(135deg,#10b981,#059669); }
.sn--error   { background: linear-gradient(135deg,#ef4444,#dc2626); }
.sn--warn    { background: linear-gradient(135deg,#f59e0b,#d97706); }
.sn--info    { background: linear-gradient(135deg,#3b82f6,#2563eb); }

/* =====================================================================
   🧾 Storefront confirm (.sconf) — reemplaza confirm() en catálogo público
   ===================================================================== */
.sconf {
  position: fixed; inset: 0;
  z-index: 10001;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .2s;
}
.sconf.is-open { opacity: 1; }
.sconf__backdrop {
  position: absolute; inset: 0;
  background: rgba(10,14,30,0.6);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
.sconf__card {
  position: relative;
  background: #fff;
  border-radius: 24px;
  padding: 36px 32px 28px;
  width: min(420px, 92vw);
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,0.3);
  transform: scale(0.9);
  transition: transform .28s cubic-bezier(.34,1.56,.64,1);
}
.sconf.is-open .sconf__card { transform: scale(1); }
.sconf__icon {
  width: 64px; height: 64px; border-radius: 50%;
  margin: 0 auto 16px;
  background: linear-gradient(135deg,#fef3c7,#fde68a);
  color: #b45309;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
}
.sconf__card h3 { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: #0f172a; }
.sconf__card p  { margin: 0 0 24px; color: #475569; font-size: 14px; line-height: 1.5; }
.sconf__actions { display: flex; gap: 10px; justify-content: center; }
.sconf__actions .btn { flex: 1; max-width: 160px; justify-content: center; }

/* =====================================================================
   🎨 Visitor theme switcher (floating FAB + panel)
   ===================================================================== */
.theme-switcher {
  position: fixed;
  bottom: 100px;           /* encima del bottom-nav */
  right: 20px;
  z-index: 150;
}
@media (min-width: 900px) {
  .theme-switcher { bottom: 24px; right: 24px; }
}
.theme-switcher__fab {
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, #a855f7, #ec4899, #f59e0b);
  color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(168,85,247,0.45), 0 0 0 2px rgba(255,255,255,0.15) inset;
  transition: transform .2s, box-shadow .2s;
  animation: tsFloat 3s ease-in-out infinite;
}
.theme-switcher__fab:hover { transform: scale(1.08) rotate(15deg); box-shadow: 0 14px 36px rgba(168,85,247,0.55); }
.theme-switcher.is-open .theme-switcher__fab { transform: scale(0.95) rotate(45deg); animation: none; }
@keyframes tsFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.theme-switcher__panel {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  width: 280px;
  background: #ffffff;
  border-radius: 18px;
  padding: 18px 16px 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.08);
  animation: tsPanelIn .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes tsPanelIn {
  from { opacity: 0; transform: translateY(12px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
.theme-switcher__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.theme-switcher__head strong { font-size: 15px; color: #0f172a; font-weight: 800; }
.theme-switcher__close {
  width: 28px; height: 28px; border-radius: 50%;
  background: #f1f5f9; border: none; color: #64748b;
  font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.theme-switcher__close:hover { background: #e2e8f0; color: #0f172a; transform: rotate(90deg); }
.theme-switcher__hint { margin: 0 0 12px; font-size: 12px; color: #64748b; }
.theme-switcher__options { display: grid; gap: 8px; }
.theme-option {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: all .15s;
  font-family: inherit;
}
.theme-option:hover { background: #f1f5f9; transform: translateX(2px); }
.theme-option.is-active {
  background: #eff6ff;
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59,130,246,0.15);
}
.theme-option.is-active::after {
  content: '✓';
  margin-left: auto;
  width: 22px; height: 22px; border-radius: 50%;
  background: #3b82f6; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900;
}
.theme-option__swatch {
  width: 38px; height: 38px; border-radius: 10px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.theme-option__swatch--dark {
  background:
    radial-gradient(circle at 30% 30%, #1e293b, #06080f);
}
.theme-option__swatch--light {
  background:
    radial-gradient(circle at 20% 20%, #cfe3ff 0%, transparent 50%),
    radial-gradient(circle at 80% 30%, #d5f5e3 0%, transparent 50%),
    radial-gradient(circle at 60% 80%, #ffe0ec 0%, transparent 50%),
    #fbfcff;
}
.theme-option__swatch--vibrant {
  background:
    radial-gradient(circle at 30% 30%, #a855f7 0%, transparent 55%),
    radial-gradient(circle at 70% 70%, #ec4899 0%, transparent 55%),
    #0a0520;
}
.theme-option__info { display: flex; flex-direction: column; gap: 1px; }
.theme-option__info strong { font-size: 14px; font-weight: 700; color: #0f172a; }
.theme-option__info small { font-size: 11px; color: #64748b; }
.theme-switcher__foot {
  margin: 12px 0 0; padding-top: 10px;
  border-top: 1px solid #f1f5f9;
  font-size: 11px; color: #94a3b8;
  text-align: center;
}

/* =====================================================================
   Dashboard toasts — bottom-right stack, icon + variant colors
   ===================================================================== */
.dtoast-stack {
  position: fixed;
  bottom: 24px; right: 24px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 9999;
  pointer-events: none;
  max-width: calc(100vw - 48px);
}
.dtoast {
  display: flex; align-items: flex-start; gap: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #64748b;
  border-radius: 12px;
  padding: 14px 44px 14px 16px;
  min-width: 280px; max-width: 420px;
  box-shadow: 0 12px 30px rgba(15,23,42,0.15);
  font-size: 14px;
  color: #0f172a;
  pointer-events: auto;
  position: relative;
  animation: dtoastIn .3s cubic-bezier(.34,1.56,.64,1);
}
.dtoast.is-leaving { animation: dtoastOut .25s ease-in forwards; }
@keyframes dtoastIn {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: none; }
}
@keyframes dtoastOut {
  to { opacity: 0; transform: translateX(100%); }
}
.dtoast__icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
  background: #f1f5f9;
}
.dtoast__body { flex: 1; line-height: 1.4; }
.dtoast__title { font-weight: 700; margin: 0 0 2px; font-size: 14px; }
.dtoast__msg { color: #475569; font-size: 13px; margin: 0; }
.dtoast__close {
  position: absolute; top: 8px; right: 8px;
  background: transparent; border: none; cursor: pointer;
  color: #94a3b8; font-size: 18px; line-height: 1;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.dtoast__close:hover { background: #f1f5f9; color: #0f172a; }

.dtoast--success { border-left-color: #10b981; }
.dtoast--success .dtoast__icon { background: #d1fae5; color: #065f46; }
.dtoast--error   { border-left-color: #ef4444; }
.dtoast--error   .dtoast__icon { background: #fee2e2; color: #991b1b; }
.dtoast--warn    { border-left-color: #f59e0b; }
.dtoast--warn    .dtoast__icon { background: #fef3c7; color: #92400e; }
.dtoast--info    { border-left-color: #3b82f6; }
.dtoast--info    .dtoast__icon { background: #dbeafe; color: #1e40af; }

@media (max-width: 480px) {
  .dtoast-stack { left: 16px; right: 16px; bottom: 16px; }
  .dtoast { min-width: 0; max-width: none; width: 100%; }
}

/* View toggle (storefront) */
.view-toggle {
  display: flex; gap: 4px; padding: 8px 16px;
  background: #fff; border-bottom: 1px solid var(--border-color);
  justify-content: flex-end;
}
.view-toggle__btn {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid var(--border-color);
  color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s;
}
.view-toggle__btn:hover { color: var(--accent); border-color: var(--accent); }
.view-toggle__btn.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* List view layout for storefront */
.catalog--list { grid-template-columns: 1fr; }
.catalog--list .product-card {
  display: grid; grid-template-columns: 100px 1fr; gap: 12px; align-items: center; min-width: 0;
}
.catalog--list .product-card__media { aspect-ratio: 1/1; margin: 8px 0 8px 8px; max-width: 100px; min-width: 0; }
.catalog--list .product-card__add { width: 44px; height: 44px; bottom: auto; top: 50%; right: 12px; transform: translateY(-50%); background: var(--accent); color: #fff; border-radius: 50%; font-size: 24px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.15); border: none; z-index: 2; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.catalog--list .product-card:hover .product-card__add { transform: translateY(-50%) scale(1.15); box-shadow: 0 6px 16px rgba(0,0,0,0.2); }
.catalog--list .product-card__add:active { transform: translateY(-50%) scale(0.95); }
.catalog--list .product-card__body { padding: 8px 64px 8px 0; min-width: 0; }

/* Dashboard chart card */
.chart-card { padding: 24px; }
.chart-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.chart-card__head h2 { margin: 0; font-size: 16px; font-weight: 700; }

/* =====================================================================
   RESPONSIVE — Mobile-first refinements
   ===================================================================== */

/* Storefront mobile tweaks */
@media (max-width: 640px) {
  .store-header { min-height: 200px; }
  .store-header__content { padding: 32px 16px 16px; }
  .store-header__logo { width: 84px; height: 84px; }
  .store-header__name { font-size: 22px; }
  .store-header__desc { font-size: 14px; }
  .store-actions { padding: 12px 4px; }
  .store-action span { font-size: 11px; }
  .catalog { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px; }
  .product-card__name { font-size: 13px; }
  .product-card__price strong { font-size: 14px; }
  .product-card__add { width: 34px; height: 34px; font-size: 18px; }
  .promo-bar { font-size: 12px; padding: 8px; }
  .cat-menu { padding: 10px 12px; }
  .cart-drawer { width: 100%; }
  .cart-drawer__head { padding: 16px; }
  .cart-drawer__list, .cart-drawer__foot { padding: 14px 16px; }
}

/* Directory mobile */
@media (max-width: 640px) {
  .dir-hero { padding: 50px 0 40px; }
  .dir-search { padding: 4px; }
  .dir-search input { padding: 10px 16px; font-size: 14px; }
  .dir-search .btn { padding: 10px 16px; font-size: 13px; }
  .dir-filters { padding: 24px 16px 0; }
  .country-pill { padding: 8px 10px; min-width: 72px; font-size: 12px; }
  .country-pill__flag { font-size: 20px; }
  .store-grid { grid-template-columns: 1fr; gap: 16px; }
  .dir-featured, .dir-results { padding: 24px 16px; }
  .pagination__page { width: 32px; height: 32px; font-size: 13px; }
}

/* Landing mobile */
@media (max-width: 640px) {
  .hero { padding: 50px 0 40px; }
  .hero__cta { width: 100%; flex-direction: column; }
  .hero__cta .btn { width: 100%; }
  .navbar__inner { padding: 12px 16px; }
  .navbar__cta .btn { padding: 8px 14px; font-size: 13px; }
  .benefits, .plans { padding: 60px 0; }
  .plan-card { padding: 28px 20px; }
  .plan-card--featured { transform: none; }
  .footer { padding: 48px 0 20px; }
  .footer__inner { gap: 24px; padding: 0 16px; }
}

/* Auth mobile */
@media (max-width: 640px) {
  .auth-card { padding: 32px 24px; }
  .auth-card h1 { font-size: 24px; }
}

/* Hamburger button — solo visible en móvil */
.dash-hamburger {
  display: none;
  position: fixed; top: 12px; left: 12px;
  z-index: 1101;
  width: 44px; height: 44px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 0;
  box-shadow: 0 2px 8px rgba(15,23,42,0.1);
  cursor: pointer;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
}
.dash-hamburger span {
  display: block;
  width: 22px; height: 2.5px;
  background: #0f172a; border-radius: 2px;
  transition: transform .25s, opacity .2s, background .2s;
}
.dash-hamburger.is-open {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.dash-hamburger.is-open span { background: #fff; }
.dash-hamburger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.dash-hamburger.is-open span:nth-child(2) { opacity: 0; }
.dash-hamburger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.dash-sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.55);
  z-index: 999;
  opacity: 0; transition: opacity .25s;
  backdrop-filter: blur(2px);
}
.dash-sidebar-backdrop.is-visible { opacity: 1; }
/* Botón de cerrar del sidebar (oculto por defecto, solo se ve con JS en móvil) */
.dash-sidebar__close { display: none; }

/* Dashboard mobile (extends earlier rules) */
@media (max-width: 880px) {
  .dash-main { padding: 16px; padding-top: 72px; }
  .page-head { gap: 12px; }
  .page-head h1 { font-size: 22px; }
  .page-head__actions { width: 100%; flex-wrap: wrap; }
  .page-head__actions .btn { flex: 1; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .metric-card { padding: 16px; }
  .metric-card__value { font-size: 24px; }
  .quick-actions__grid { grid-template-columns: 1fr; }

  .dash-header {
    padding: 8px 12px 8px 60px; gap: 8px;
    position: fixed !important; top: 0; left: 0; right: 0;
    z-index: 500;
    background: #fff; border-bottom: 1px solid #e2e8f0;
    min-height: 56px; height: auto;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .store-switcher { flex-shrink: 1; min-width: 0; }
  .store-switcher select { width: 100%; min-width: 0; max-width: 130px; font-size: 12px; padding: 6px 10px; }
  .store-switcher__label { display: none; }
  .dash-user { display: none; }

  /* Hamburger visible */
  .dash-hamburger { display: flex !important; }

  /* Sidebar → drawer lateral (oculto por defecto) */
  .dash-sidebar {
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important; right: auto !important;
    width: 280px !important; max-width: 85vw !important; height: 100vh !important;
    z-index: 1000 !important;
    transform: translateX(-100%) !important;
    transition: transform .25s ease-out !important;
    display: flex !important; flex-direction: column !important;
    padding: 20px 16px !important;
    gap: 4px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-shadow: 4px 0 24px rgba(15,23,42,0.15) !important;
    white-space: normal !important;
  }
  .dash-sidebar.is-open { transform: translateX(0) !important; }

  /* Mostrar brand y logout (override del CSS viejo que los ocultaba) */
  .dash-brand { display: flex !important; padding: 10px 14px 20px !important; margin-bottom: 6px; }
  .dash-logout { display: block !important; margin-top: auto !important; padding-top: 20px !important; border-top: 1px solid rgba(148,163,184,0.2); }
  .dash-logout .btn { width: 100%; }

  .dash-sidebar--admin { padding: 20px 16px !important; }

  /* Navegación en columna (override del grid horizontal) */
  .dash-nav {
    display: flex !important;
    flex-direction: column !important;
    grid-auto-flow: unset !important;
    grid-auto-columns: unset !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
  }
  .dash-nav__link {
    padding: 14px 16px !important;
    flex-shrink: 0 !important;
    min-height: 48px !important;
    display: flex !important; align-items: center; gap: 12px;
    border-radius: 10px;
    font-size: 15px !important;
    white-space: normal !important;
  }
  /* Mostrar el texto de los links (override que escondía los <span>) */
  .dash-nav__link span { display: inline !important; }
}

/* Tables on mobile — transformar a tarjetas apiladas */
@media (max-width: 720px) {
  .table, .table thead, .table tbody, .table tr, .table th, .table td {
    display: block;
  }
  .table { border-collapse: separate; border-spacing: 0; white-space: normal; }
  .table thead { display: none; } /* cabeceras no hacen sentido en cards */
  .table tbody tr {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(15,23,42,0.05);
  }
  .table tbody td {
    padding: 6px 0;
    border: none !important;
    position: relative;
    text-align: left;
  }
  /* Etiquetar cada td con data-label para mobile */
  .table tbody td[data-label]::before {
    content: attr(data-label);
    display: inline-block;
    font-weight: 700; color: #64748b;
    font-size: 12px; text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-right: 8px;
    min-width: 80px;
  }
  /* Thumb grande arriba, full-width del card */
  .table tbody td:first-child {
    padding: 0 0 12px !important;
    text-align: center;
    margin: 0 -14px 10px;   /* compensa padding del card para ir edge-to-edge */
    display: block !important;
  }
  .table tbody td:first-child::before { display: none; }
  .table tbody td:first-child .thumb {
    display: block !important;
    width: 100% !important; max-width: 100% !important;
    height: auto !important; aspect-ratio: 1/1;
    border-radius: 12px 12px 0 0;
    object-fit: cover;
    margin: 0 !important;
  }
  .table tbody td:first-child .thumb--empty {
    display: block; width: 100%; max-width: 100%;
    aspect-ratio: 1/1; border-radius: 12px 12px 0 0;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  }
  /* Acciones en grid de 2 columnas; Eliminar destructivo full-width */
  .row-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding-top: 12px !important;
    border-top: 1px dashed #e2e8f0 !important;
    margin-top: 10px;
  }
  .row-actions::before { display: none !important; }
  .row-actions > .btn,
  .row-actions > form { width: 100%; min-height: 44px; }
  .row-actions > form .btn { width: 100%; min-height: 44px; }
  .row-actions .landing-lock-badge {
    grid-column: 1 / -1;
    text-align: center; padding: 10px;
    background: #fff7ed; border-radius: 8px;
    font-size: 13px; color: #9a3412;
  }
  /* Botón "Eliminar" destacado como destructivo y ocupa toda la fila */
  .row-actions > form[data-confirm-danger] {
    grid-column: 1 / -1;
  }
  .row-actions > form[data-confirm-danger] .btn {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border: 1.5px solid #fecaca !important;
    font-weight: 700;
  }
  .row-actions > form[data-confirm-danger] .btn:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
  }
  /* Labels de cada campo más clean y consistentes */
  .table tbody td[data-label] {
    display: grid !important;
    grid-template-columns: 90px 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 14px;
  }
  .table tbody td[data-label]::before {
    margin: 0 !important; min-width: 0 !important;
    font-size: 11px !important;
  }
  .table tbody td[data-label]:last-of-type {
    border-bottom: none !important;
  }
}

@media (max-width: 480px) {
  .metrics-grid { grid-template-columns: 1fr; }
  .filter-bar > * { width: 100%; }
  .form--two-col { grid-template-columns: 1fr; }
  .form__col-2 { grid-column: auto; }
  .palette-swatch { width: 32px; height: 32px; }
}

/* Bottom nav padding for mobile (so content isn't covered) */
@media (max-width: 880px) {
  body.public-body { padding-bottom: 70px; }
}

/* =====================================================================
   DIRECTORY — Light theme aligned with landing page
   ===================================================================== */
.dir-body {
  min-height: 100vh;
  background: var(--bg-gradient-soft);
  color: var(--text-primary);
  position: relative;
}
.dir-body::before, .dir-body::after {
  content: ''; position: fixed; width: 600px; height: 600px; border-radius: 50%;
  filter: blur(120px); opacity: 0.4; z-index: 0; pointer-events: none;
}
.dir-body::before { background: #93c5fd; top: -200px; left: -200px; }
.dir-body::after { background: #6ee7b7; bottom: -200px; right: -200px; }
.dir-body > * { position: relative; z-index: 1; }

/* Directory page: same navbar as landing — no sticky, no special styling */
.dir-body > .navbar { background: transparent; border-bottom: 1px solid rgba(226,232,240,0.4); }

/* Search hero section (directory) */
.dir-hero-search {
  padding: 40px 0 20px;
  text-align: center;
  position: relative;
}
.dir-hero-search__title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--text-primary);
}
.dir-hero-search__sub {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0 0 24px;
}
.dir-search-big {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--border-color);
  padding: 8px 10px 8px 20px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  max-width: 620px; margin: 0 auto;
  color: var(--text-muted);
}
.dir-search-big input {
  flex: 1; background: transparent; border: none;
  padding: 10px 0; font-size: 15px; color: var(--text-primary);
  min-width: 0;
}
.dir-search-big input:focus { outline: none; box-shadow: none; }
.dir-search-big input::placeholder { color: var(--text-muted); }
.dir-search-big .btn { flex-shrink: 0; padding: 10px 20px; font-size: 14px; }

@media (max-width: 600px) {
  .dir-hero-search { padding: 28px 0 12px; }
  .dir-hero-search__sub { font-size: 14px; padding: 0 16px; }
  .dir-search-big { padding: 6px 8px 6px 14px; margin: 0 16px; }
  .dir-search-big input { font-size: 14px; }
  .dir-search-big .btn { padding: 8px 14px; font-size: 13px; }
}
.dir-nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 24px; max-width: 1280px; margin: 0 auto;
}
.dir-search-top {
  flex: 1; max-width: 400px; min-width: 0; display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--border-color);
  padding: 10px 18px; border-radius: var(--radius-pill); color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
}
.dir-search-top input {
  background: transparent; border: none; color: var(--text-primary);
  padding: 0; width: 100%; font-size: 14px;
}
.dir-search-top input:focus { box-shadow: none; outline: none; }
.dir-search-top input::placeholder { color: var(--text-muted); }

/* Country flags strip — 🌎 Todos fixed + others auto-scrolling marquee */
.dir-flags { padding: 24px 0 12px; max-width: 1280px; margin: 0 auto; }
.country-strip {
  display: flex; align-items: center; gap: 14px;
  padding: 0 24px;
}

/* Pinned "Todos" (🌎) — stays on the left, never rotates */
.flag-circle--pin {
  flex-shrink: 0;
  z-index: 2;
  box-shadow: 4px 0 16px rgba(15,23,42,0.08), var(--shadow-sm);
  position: relative;
}

/* Scrolling wrapper with edge fades */
.country-strip__track-wrap {
  flex: 1;
  overflow: hidden;
  padding: 8px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.country-strip__track {
  display: flex; gap: 14px;
  width: max-content;
  animation: flags-slide 60s linear infinite;
  will-change: transform;
}
.country-strip__track:hover { animation-play-state: paused; }
@keyframes flags-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.flag-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: #fff; padding: 4px;
  border: 2px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: all .2s;
}
.flag-circle:hover {
  transform: translateY(-3px);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.flag-circle.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: 0 6px 16px rgba(37,99,235,0.25);
}
.flag-circle img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.flag-circle__all {
  font-size: 26px;
  background: linear-gradient(135deg, #dbeafe, #d1fae5);
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 50%;
}

@media (max-width: 640px) {
  .country-strip { gap: 10px; padding: 0 16px; }
  .flag-circle { width: 46px; height: 46px; }
  .flag-circle__all { font-size: 22px; }
  .country-strip__track { animation-duration: 45s; }
}

/* Section labels */
.dir-tabs { padding: 12px 24px; max-width: 1280px; margin: 0 auto; }
.dir-section-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-muted); font-weight: 700; margin: 0 0 12px;
}
.cat-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-chip {
  display: inline-flex; align-items: center; padding: 9px 16px;
  background: #fff; border: 1.5px solid var(--border-color);
  color: var(--text-secondary); border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600; transition: all .15s;
  box-shadow: var(--shadow-sm);
}
.cat-chip:hover { background: var(--color-primary-light); color: var(--color-primary); text-decoration: none; border-color: var(--color-primary); }
.cat-chip.is-active {
  background: linear-gradient(135deg, #2563eb, #6366f1);
  color: #fff; border-color: transparent;
  box-shadow: 0 6px 20px rgba(37,99,235,0.35);
}

/* Sections */
.dir-section { padding: 36px 24px; max-width: 1280px; margin: 0 auto; }
.dir-section-title {
  color: var(--text-primary); font-size: 26px;
  margin-bottom: 20px; font-weight: 800; letter-spacing: -0.02em;
}
.muted-light { color: var(--text-muted); font-weight: 500; font-size: 16px; }

/* Store grid (compact 4 per row) */
.store-grid-dark {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* Store card - light theme */
.dstore {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none;
  transition: all .25s ease;
  box-shadow: var(--shadow-card);
  --card-accent: #2563eb;
}
.dstore:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(15,23,42,0.12), 0 0 0 1px var(--card-accent);
  text-decoration: none;
  border-color: var(--card-accent);
}
.dstore__media {
  position: relative; aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--card-accent), color-mix(in srgb, var(--card-accent) 50%, #6366f1));
  overflow: hidden;
}
.dstore__media img { width: 100%; height: 100%; object-fit: cover; }
.dstore__media-fallback { width: 100%; height: 100%; background: linear-gradient(135deg, var(--card-accent), color-mix(in srgb, var(--card-accent) 50%, #000)); }
.dstore__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 100%);
}
.dstore__cat {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: rgba(255,255,255,0.98);
  color: var(--text-primary);
  font-size: 11px; font-weight: 700;
  padding: 5px 10px; border-radius: var(--radius-pill);
  text-transform: uppercase; letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.dstore__body {
  padding: 0 16px 18px; text-align: center; position: relative;
  margin-top: -32px; z-index: 2;
}
.dstore__logo {
  width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%;
  border: 4px solid #fff; background: #fff; overflow: hidden;
  box-shadow: 0 8px 20px rgba(15,23,42,0.15);
  display: inline-flex; align-items: center; justify-content: center;
  outline: 2px solid var(--card-accent); outline-offset: 2px;
}
.dstore__logo img { width: 100%; height: 100%; object-fit: cover; }
.dstore__logo span { color: var(--card-accent); font-size: 22px; font-weight: 800; }

.dstore__name {
  color: var(--text-primary); font-size: 14px; font-weight: 800; letter-spacing: 0.04em;
  margin: 0 0 4px;
}
.dstore__country {
  color: var(--text-muted); font-size: 12px; margin: 0 0 14px;
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
}
.dstore__cta {
  display: inline-block; padding: 9px 16px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-color); color: var(--text-secondary);
  font-size: 12px; font-weight: 700; transition: all .18s;
  width: 100%;
  background: transparent;
}
.dstore:hover .dstore__cta {
  background: var(--card-accent); color: #fff; border-color: var(--card-accent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--card-accent) 30%, transparent);
}

/* Empty + footer */
.empty-state {
  text-align: center; padding: 80px 20px;
  color: var(--text-muted); font-size: 15px;
  background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--border-color);
}
.dir-footer {
  text-align: center; padding: 40px 24px;
  color: var(--text-muted); font-size: 13px;
  border-top: 1px solid var(--border-color);
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(10px);
  margin-top: 40px;
}
.pagination--dark .pagination__page {
  background: #fff; color: var(--text-secondary);
  border-color: var(--border-color);
  box-shadow: var(--shadow-sm);
}
.pagination--dark .pagination__page:hover {
  background: var(--color-primary-light); color: var(--color-primary);
  border-color: var(--color-primary);
}
.pagination--dark .pagination__page.is-active {
  background: linear-gradient(135deg, #2563eb, #6366f1);
  border-color: transparent; color: #fff;
  box-shadow: 0 4px 12px rgba(37,99,235,0.35);
}

/* Responsive */
@media (max-width: 880px) {
  .dir-nav__inner { gap: 10px; padding: 10px 16px; }
  .dir-nav__inner .navbar__brand span:not(.brand-mark) { display: none; }
  .dir-search-top { padding: 6px 12px; }
  .flag-circle { width: 48px; height: 48px; }
  .store-grid-dark { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
  .dstore__name { font-size: 13px; }
  .dir-section { padding: 24px 16px; }
  .dir-section-title { font-size: 18px; }
}
@media (max-width: 480px) {
  .store-grid-dark { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .dstore__logo { width: 52px; height: 52px; }
  .dstore__cta { padding: 6px 10px; font-size: 11px; }
  .flag-circle { width: 44px; height: 44px; }
  .country-strip__track { gap: 10px; }
  .dir-flags { padding: 16px 0 8px; }
}

/* =====================================================================
   STOREFRONT — 3 themes (dark / light / vibrant) with per-store accent
   ===================================================================== */
.store-page {
  min-height: 100vh;
  padding: 0 0 100px;
  transition: background .4s ease;
}
.store-page * {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
/* Make sure body/html background matches the store page theme
   (avoids white gap at top when promo-bar has margin) */
body:has(.store-page--dark),
html:has(.store-page--dark) { background: #0a0e1a; }
body:has(.store-page--vibrant),
html:has(.store-page--vibrant) { background: #0a0520; }
body:has(.store-page--light),
html:has(.store-page--light) {
  background:
    radial-gradient(ellipse 90% 60% at 10% 0%,    #cfe3ff 0%, transparent 55%),
    radial-gradient(ellipse 80% 50% at 50% 20%,   #e9dcff 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at 90% 10%,   #d5f5e3 0%, transparent 55%),
    radial-gradient(ellipse 90% 60% at 70% 90%,   #ffe0ec 0%, transparent 60%),
    #fbfcff;
  background-attachment: fixed;
}

/* 🌑 OBSIDIAN — Premium dark with glassmorphism */
.store-page--dark,
.store-page:not([class*="--light"]):not([class*="--vibrant"]) {
  background: #06080f;
  color: #e6e8ee;
  background-image:
    radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 50%),
    radial-gradient(ellipse at 80% 100%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 50%),
    linear-gradient(180deg, #0a0e1a 0%, #06080f 100%);
}
.store-page--dark .store-header__name,
.store-page--dark .product-card__name {
  color: #fff;
  letter-spacing: -0.01em;
}
.store-page--dark .product-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 18px;
}
.store-page--dark .product-card:hover {
  border-color: var(--accent);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
  transform: translateY(-6px);
}
.store-page--dark .product-card__media { background: rgba(255,255,255,0.04); }
.store-page--dark .promo-bar { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); }
.store-page--dark .cat-menu .cat-pill {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #cbd5e1;
  backdrop-filter: blur(12px);
}
.store-page--dark .store-actions-row {
  background: rgba(6,8,15,0.7);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.store-page--dark .store-action {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.store-page--dark .bottom-nav {
  background: rgba(6,8,15,0.85);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ☀ PORCELAIN — Minimalista profesional blanco puro (estilo Empresy) */
.store-page--light {
  background: #fafbfc !important;
  background-attachment: fixed !important;
  color: #0f172a;
  font-family: -apple-system, BlinkMacSystemFont, "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
}

/* Header — banner protagonista con textos blancos flotantes encima */
.store-page--light .store-header {
  background: #ffffff !important;
  min-height: 420px;
  overflow: hidden;
  border-radius: 0;
  border-bottom: 1px solid #f1f5f9;
  position: relative;
}
/* Banner 100% natural — override reglas globales con mayor especificidad */
.store-page.store-page--light .store-header__banner {
  opacity: 1 !important;
  filter: none !important;
}
/* Sin overlay — banner original puro */
.store-page.store-page--light .store-header__overlay {
  background: transparent !important;
}

.store-page--light .store-header__name,
.store-page--light .store-header__desc,
.store-page--light .store-header__hours .badge {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  position: relative; z-index: 2;
}
.store-page--light .store-header__content {
  position: relative; z-index: 2;
}

/* Nombre de tienda — texto blanco flotante sobre el banner */
.store-page--light .store-header__name {
  display: block;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 5vw, 44px);
  text-transform: none !important;
  letter-spacing: -0.02em;
  text-shadow:
    0 2px 4px rgba(0,0,0,0.9),
    0 4px 16px rgba(0,0,0,0.7),
    0 0 2px rgba(0,0,0,1) !important;
  margin-bottom: 10px;
  font-style: normal !important;
  line-height: 1.15;
}

/* Descripción — texto blanco directo, sin tarjeta */
.store-page--light .store-header__desc {
  display: block;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-size: 15px;
  max-width: 620px;
  margin: 0 auto 4px;
  text-shadow:
    0 1px 3px rgba(0,0,0,0.95),
    0 2px 12px rgba(0,0,0,0.75),
    0 0 1px rgba(0,0,0,1) !important;
  line-height: 1.5;
}

/* Wrapper de horarios y rating — flotantes sobre el banner */
.store-page--light .store-header__hours {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
  position: relative;
  z-index: 2;
}

/* Badges de horarios y rating — solo texto blanco con sombra, sin fondo */
.store-page--light .store-header__hours .badge {
  background: transparent !important;
  color: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 8px;
  border-radius: 0;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  font-weight: 700;
  text-transform: none;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.95),
    0 2px 8px rgba(0,0,0,0.75),
    0 0 1px rgba(0,0,0,1) !important;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Badge verde de horario → se mantiene blanco pero con punto verde sutil antes */
.store-page--light .store-header__hours .badge--green {
  color: #ffffff !important;
}
.store-page--light .store-header__hours .badge--green::before {
  content: '●';
  color: #34d399;
  font-size: 10px;
  margin-right: 2px;
  text-shadow: 0 0 8px rgba(52,211,153,0.6);
}

/* Rating badge con estrellas — también flotante */
.store-page--light .store-header__hours .store-rating-badge {
  background: transparent !important;
  color: #ffffff !important;
}
.store-page--light .store-header__hours .store-rating-badge .stars-mini {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
}
.store-page--light .store-header__hours .store-rating-badge .stars-mini span {
  color: rgba(255,255,255,0.35) !important;
}
.store-page--light .store-header__hours .store-rating-badge .stars-mini span.on {
  color: #fbbf24 !important;
}
.store-page--light .store-header__hours .store-rating-badge strong {
  color: #ffffff !important;
  font-weight: 800;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}
.store-page--light .store-header__hours .store-rating-badge small {
  color: rgba(255,255,255,0.92) !important;
  font-weight: 500;
  font-size: 11px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}

/* Promo bar — limpia con color de marca sutil */
.store-page--light .promo-bar {
  background: color-mix(in srgb, var(--accent) 10%, #fafbfc) !important;
  color: #0f172a !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-shadow: none;
}
.store-page--light .promo-bar__chunk { color: #0f172a !important; }

/* Store actions row — iconos limpios con borde sutil */
.store-page--light .store-actions-row {
  background: rgba(255,255,255,0.95) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid #f1f5f9 !important;
}
.store-page--light .store-action {
  background: #ffffff !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  transition: all .2s ease;
}
.store-page--light .store-action:hover {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background: #fff !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 18%, transparent);
  transform: translateY(-1px);
}
/* Toggle view (grid/list) */
.store-page--light .view-toggle__btn {
  background: #ffffff !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: all .2s ease;
}
.store-page--light .view-toggle__btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.store-page--light .view-toggle__btn.is-active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

/* Category menu nav (dropdown) */
.store-page--light .cat-menu-nav {
  background: #ffffff !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Category pills — blanco con borde gris, activo = color de marca */
.store-page--light .cat-menu .cat-pill {
  background: #ffffff !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
  font-weight: 600;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: all .2s ease;
}
.store-page--light .cat-menu .cat-pill:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.store-page--light .cat-menu .cat-pill.is-active {
  background: #0f172a !important;
  color: #fff !important;
  border-color: #0f172a !important;
  font-weight: 700;
}

/* Search bar — blanco minimal */
.store-page--light .catalog-search {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 1px 3px rgba(15,23,42,0.03);
}
.store-page--light .catalog-search:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Product cards — blanco puro, sombra sutil, hover elevado (override shades rule) */
.store-page--light .product-card {
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 1px 2px rgba(15,23,42,0.03) !important;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.store-page--light .product-card:hover {
  box-shadow: 0 12px 28px rgba(15,23,42,0.1), 0 4px 12px rgba(15,23,42,0.05) !important;
  border-color: #e2e8f0 !important;
  transform: translateY(-3px);
}
.store-page--light .product-card__media {
  background: #f8fafc !important;
  border-radius: 0 !important;
}
.store-page--light .product-card__name {
  color: #0f172a !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  font-size: 15px;
}
.store-page--light .product-card__body small {
  color: #94a3b8 !important;
  letter-spacing: 0.02em;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
}
.store-page--light .product-card__price strong {
  color: #0f172a !important;
  background: none !important;
  -webkit-text-fill-color: #0f172a !important;
  font-weight: 800;
  font-size: 17px;
}
.store-page--light .product-card__compare {
  color: #94a3b8 !important;
  font-size: 13px;
  font-weight: 500;
}
.store-page--light .product-card__add {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
  transition: all .2s ease;
}
.store-page--light .product-card__add:hover {
  background: color-mix(in srgb, var(--accent) 85%, black) !important;
  transform: scale(1.05);
}

/* Bottom nav — blanco limpio */
.store-page--light .bottom-nav {
  background: rgba(255,255,255,0.98) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid #f1f5f9 !important;
  box-shadow: 0 -4px 20px rgba(15,23,42,0.04);
}
.store-page--light .bottom-nav__cart {
  border: 3px solid #fff !important;
  background: var(--accent) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent);
}
.store-page--light .bottom-nav__item { color: #94a3b8 !important; }
.store-page--light .bottom-nav__item:hover,
.store-page--light .bottom-nav__item.is-active { color: var(--accent) !important; }

/* Cart drawer — blanco puro */
.store-page--light .cart-drawer { background: #fff !important; color: #0f172a !important; }
.store-page--light .cart-drawer__head h2 { color: #0f172a !important; font-weight: 800; }
.store-page--light .cart-drawer__head button { background: #f1f5f9 !important; color: #64748b !important; }
.store-page--light .cart-drawer__foot { background: #f8fafc !important; border-top: 1px solid #f1f5f9 !important; }
.store-page--light .cart-item { background: #f8fafc !important; border: 1px solid #f1f5f9 !important; }
.store-page--light .cart-item__name { color: #0f172a !important; font-weight: 600; }
.store-page--light .cart-drawer input { background: #fff !important; color: #0f172a !important; border: 1px solid #e2e8f0 !important; }
.store-page--light .cart-drawer input:focus { border-color: var(--accent) !important; outline: none; }
.store-page--light .cart-section-label { color: #64748b !important; font-weight: 700; }
.store-page--light .cart-item__qty { background: #ffffff !important; border: 1px solid #e2e8f0 !important; }
.store-page--light .cart-item__qty button { background: transparent !important; color: #0f172a !important; }
.store-page--light .cart-item__qty span { color: #0f172a !important; }
.store-page--light .cart-input { background: #fff !important; border: 1px solid #e2e8f0 !important; }
.store-page--light .cart-input svg { color: #94a3b8 !important; }
.store-page--light .cart-input input { color: #0f172a !important; }
.store-page--light .cart-input input::placeholder { color: #94a3b8 !important; }
.store-page--light .btn-cart-send {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent);
}
.store-page--light .btn-cart-send:hover { background: color-mix(in srgb, var(--accent) 85%, black) !important; }
.store-page--light .store-header__name { color: #0f172a; }
.store-page--light .store-header__desc { color: #475569; }
.store-page--light .store-header__hours .badge { color: #334155; }
.store-page--light .store-actions-row { background: rgba(255,255,255,0.9); border-bottom-color: #e5e7eb; }
.store-page--light .store-action { background: #f3f4f6; color: #475569; border-color: #e5e7eb; }
.store-page--light .store-action:hover { color: var(--accent); }
.store-page--light .cat-menu-nav { background: #fff; color: #475569; border-color: #e5e7eb; }
.store-page--light .cat-menu .cat-pill { background: #f3f4f6; color: #475569; border: 1px solid transparent; }
.store-page--light .catalog-search { background: #fff; color: #0f172a; border-color: #e5e7eb; }
.store-page--light .product-card { background: #fff; border: 1px solid #e5e7eb; border-radius: var(--radius-lg); box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.store-page--light .product-card__media { background: #f3f4f6; }
.store-page--light .product-card__name { color: #0f172a; }
.store-page--light .product-card__body small { color: #94a3b8; }
.store-page--light .product-card__compare { color: #94a3b8; }
.store-page--light .bottom-nav { background: #fff; border-top: 1px solid #e5e7eb; }
.store-page--light .bottom-nav__cart { border-color: #fff; }
.store-page--light .bottom-nav__item { color: #94a3b8; }
.store-page--light .view-toggle__btn { background: #f3f4f6; color: #64748b; border-color: #e5e7eb; }
.store-page--light .cart-drawer { background: #fff; color: #0f172a; }
.store-page--light .cart-drawer__head h2 { color: #0f172a; }
.store-page--light .cart-drawer__head button { background: #f3f4f6; color: #64748b; }
.store-page--light .cart-drawer__foot { background: #f9fafb; border-top-color: #e5e7eb; }
.store-page--light .cart-item { background: #f9fafb; border: 1px solid #e5e7eb; }
.store-page--light .cart-item__name { color: #0f172a; }
.store-page--light .cart-drawer input { background: #fff; color: #0f172a; border: 1px solid #e5e7eb; }
.store-page--light .cart-drawer__total span { color: #64748b; }
.store-page--light .cart-section-label { color: #94a3b8; }
.store-page--light .cart-item__qty { background: #f3f4f6; }
.store-page--light .cart-item__qty button { background: #fff; color: #334155; }
.store-page--light .cart-input { background: #fff; border: 1px solid #e5e7eb; }
.store-page--light .cart-input svg { color: #94a3b8; }
.store-page--light .cart-input input { color: #0f172a; }
.store-page--light .cart-input input::placeholder { color: #94a3b8; }

/* 🌈 AURORA — Gradiente vibrante con glassmorphism */
.store-page--vibrant {
  background:
    radial-gradient(ellipse 800px 600px at 15% 10%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 60%),
    radial-gradient(ellipse 700px 500px at 85% 90%, color-mix(in srgb, var(--accent) 30%, #8b5cf6 30%), transparent 55%),
    radial-gradient(ellipse 600px 400px at 50% 50%, rgba(168,85,247,0.15), transparent 60%),
    linear-gradient(180deg, #0f0520 0%, #1a0940 50%, #0a0520 100%);
  color: #fff;
  background-attachment: fixed;
}
.store-page--vibrant .promo-bar {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #ec4899));
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--accent) 30%, transparent);
}
.store-page--vibrant .store-header__overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(15,5,32,0.6) 100%);
}
.store-page--vibrant .store-header__name {
  color: #fff;
  background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--accent) 50%, #fff));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.store-page--vibrant .store-actions-row {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.store-page--vibrant .store-action {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
}
.store-page--vibrant .cat-menu .cat-pill {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
}
.store-page--vibrant .cat-menu .cat-pill.is-active {
  background: linear-gradient(135deg, var(--accent), #ec4899);
  border-color: transparent;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 40%, transparent);
}
.store-page--vibrant .product-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.store-page--vibrant .product-card:hover {
  border-color: rgba(255,255,255,0.3);
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.25), 0 0 60px color-mix(in srgb, var(--accent) 20%, transparent);
}
.store-page--vibrant .product-card__media { background: rgba(255,255,255,0.1); }
.store-page--vibrant .product-card__body small {
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.12em;
  font-weight: 700;
}
.store-page--vibrant .product-card__name { color: #fff; }
.store-page--vibrant .product-card__price strong {
  background: linear-gradient(90deg, var(--accent), #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}
.store-page--vibrant .product-card__add {
  background: linear-gradient(135deg, var(--accent), #ec4899);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 40%, transparent);
}
.store-page--vibrant .bottom-nav {
  background: rgba(15,5,32,0.7);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* Promo bar — top thin strip with dark navy */
.store-page .promo-bar {
  background: #0f1729;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Header banner */
.store-page .store-header {
  position: relative; min-height: 360px;
  background: linear-gradient(135deg, #1a1f35, #0a0e1a);
  overflow: hidden;
}
.store-page .store-header__banner { opacity: 0.45; }
.store-page .store-header__overlay {
  background: linear-gradient(180deg,
    rgba(10,14,26,0.4) 0%,
    rgba(10,14,26,0.7) 60%,
    rgba(10,14,26,0.95) 100%);
}
/* 🔆 Porcelain override — banner al 100% sin oscurecer */
.store-page.store-page--light .store-header {
  background: #ffffff !important;
}
.store-page.store-page--light .store-header__banner {
  opacity: 1 !important;
  filter: none !important;
}
.store-page.store-page--light .store-header__overlay {
  background: transparent !important;
}
.store-page .store-header__content {
  padding: 56px 20px 28px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.store-page .store-header__logo {
  width: 130px; height: 130px;
  background: #fff;
  border: none;
  outline: 3px solid var(--accent); outline-offset: 6px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.store-page .store-header__name {
  color: #fff;
  font-size: 32px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 24px;
}
.store-page .store-header__desc {
  color: #94a3b8;
  font-style: italic;
  font-size: 14px;
  max-width: 540px;
}
.store-page .store-header__hours {
  margin-top: 16px;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.store-page .store-header__hours .badge {
  background: transparent;
  color: #fff;
  border: none;
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 0;
  text-transform: uppercase;
  font-weight: 700;
}

/* Action bar — 3-column layout: empty | centered icons | view toggle right */
.store-page .store-actions-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: rgba(10,14,26,0.85);
  padding: 16px 32px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  position: sticky; top: 0; z-index: 110;
  backdrop-filter: blur(12px);
  max-width: 1200px;
  margin: 0 auto;
  isolation: isolate;
  pointer-events: auto;
}
.store-page .store-actions {
  display: inline-flex;
  gap: 12px;
  padding: 0;
  border: none;
  background: transparent;
  grid-column: 2;          /* center column */
  justify-self: center;
}
.store-page .store-action {
  display: inline-flex; align-items: center; justify-content: center;
  flex-direction: row;
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.06); border-radius: 50%;
  color: #cbd5e1; padding: 0; gap: 0;
  border: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
  transition: all .15s;
  -webkit-tap-highlight-color: rgba(255,255,255,.15);
  touch-action: manipulation;
  cursor: pointer;
  position: relative;
  z-index: 1;
}
.store-page .store-action span { display: none; }
.store-page .store-action svg { width: 18px; height: 18px; flex-shrink: 0; pointer-events: none; }
.store-page .store-action:hover {
  background: var(--accent); color: #fff; border-color: var(--accent);
  transform: translateY(-2px);
}
.store-page .store-actions-row .view-toggle {
  grid-column: 3;          /* right column */
  justify-self: end;
}

.store-page .view-toggle { padding: 0; background: transparent; border: none; gap: 6px; }
.store-page .view-toggle__btn {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
  color: #94a3b8; width: 38px; height: 38px;
  cursor: pointer; position: relative; z-index: 1;
  -webkit-tap-highlight-color: rgba(255,255,255,.15);
  touch-action: manipulation;
}
.store-page .view-toggle__btn svg { pointer-events: none; }
.store-page .view-toggle__btn:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: var(--accent); }
.store-page .view-toggle__btn.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Search input */
.store-page .catalog-search {
  background: rgba(255,255,255,0.06); color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
}

/* Category menu wrap with arrows + centered */
.store-page .cat-menu-wrap {
  display: flex; align-items: center; gap: 8px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px 8px;
}
.store-page .cat-menu-nav {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: #cbd5e1;
  font-size: 18px; flex-shrink: 0;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.store-page .cat-menu-nav:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Category menu */
.store-page .cat-menu {
  background: transparent;
  border-bottom: none;
  padding: 0;
  position: relative;
  flex: 1;
  justify-content: center;
}
.store-page .cat-menu .cat-pill {
  background: rgba(255,255,255,0.06);
  color: #cbd5e1;
  border: 1px solid rgba(255,255,255,0.08);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 9px 18px;
}
.store-page .cat-menu .cat-pill.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Products grid — centered max width */
.store-page .catalog {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Search input — centered max width */
.store-page .catalog-search {
  max-width: 1136px;  /* match container - 32px padding */
  margin: 12px auto;
}

/* Product card */
.store-page .product-card {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.store-page .product-card:hover {
  transform: translateY(-4px);
  box-shadow: none;
  border: none;
}
.store-page .product-card__media {
  background: #f1f5f9;  /* light cream so products pop */
  border-radius: var(--radius-md);
  margin: 0 0 12px;
  aspect-ratio: 4/5;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  overflow: hidden;
}
.store-page .product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.store-page .product-card__media-empty { background: #e2e8f0; }

/* Badges on product card */
.store-page .product-card__badge--tl,
.store-page .product-card__badge--tr {
  font-size: 10px;
  padding: 4px 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  border: none;
}

/* Sold out overlay */
.store-page .product-card__sold-out {
  background: rgba(241,245,249,0.92);
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

/* Add button */
.store-page .product-card__add {
  width: 38px; height: 38px;
  bottom: 12px; right: 12px;
  background: var(--accent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 50%, transparent);
}
.store-page .product-card__add:hover { transform: scale(1.1); }

/* Product info area */
.store-page .product-card__body {
  padding: 0;
  gap: 4px;
}
.store-page .product-card__body small { /* category */
  color: #64748b;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.store-page .product-card__name {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.store-page .product-card__price strong {
  color: var(--accent);
  font-size: 16px;
  font-weight: 800;
}
.store-page .product-card__compare {
  color: #475569;
  font-size: 12px;
}

/* Welcome popup — dark variant */
.store-page .welcome-popup__card {
  background: #131929;
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,0.08);
}
.store-page .welcome-popup__card h2 { color: #fff; }
.store-page .welcome-popup__close { background: rgba(255,255,255,0.08); color: #cbd5e1; }

/* =====================================================================
   CART DRAWER — Dark theme MiCatálogo style
   ===================================================================== */
.store-page .cart-drawer {
  background: #0f1729;
  color: #e2e8f0;
  display: flex; flex-direction: column;
}
.store-page .cart-drawer__head {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 22px 24px;
  flex-shrink: 0;
}
.store-page .cart-drawer__head h2 {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin: 0;
}
.store-page .cart-drawer__close {
  background: rgba(255,255,255,0.06);
  color: #cbd5e1;
  border: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  transition: all .15s;
}
.store-page .cart-drawer__close:hover { background: rgba(255,255,255,0.12); color: #fff; }

.store-page .cart-drawer__scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.store-page .cart-section-label {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.store-page .cart-section-label--data { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.06); }

/* Cart list */
.store-page .cart-drawer__list {
  display: grid; gap: 12px; margin: 0; padding: 0; list-style: none;
}
.store-page .cart-drawer__empty {
  padding: 40px 0;
  color: #64748b;
  text-align: center;
  font-size: 13px;
}

/* Cart item — clean horizontal layout */
.store-page .cart-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 12px;
}
.store-page .cart-item img,
.store-page .cart-item__img-empty {
  width: 64px; height: 64px;
  border-radius: 10px;
  object-fit: cover;
  background: #1e293b;
}
.store-page .cart-item__info { min-width: 0; }
.store-page .cart-item__name {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.store-page .cart-item__price {
  color: var(--accent);
  font-weight: 800;
  font-size: 15px;
}

.store-page .cart-item__controls {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.store-page .cart-item__remove {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #94a3b8;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: all .15s;
}
.store-page .cart-item__remove:hover { background: rgba(239,68,68,0.15); color: #ef4444; border-color: rgba(239,68,68,0.3); }

.store-page .cart-item__qty {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  padding: 2px;
}
.store-page .cart-item__qty button {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.06);
  color: #cbd5e1;
  font-weight: 700;
  cursor: pointer;
  font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.store-page .cart-item__qty button:hover { background: var(--accent); color: #fff; }
.store-page .cart-item__qty span {
  color: #fff; font-weight: 700; font-size: 13px;
  min-width: 16px; text-align: center;
}

/* Form inputs with icon */
.store-page .cart-form { display: grid; gap: 12px; }
.store-page .cart-input {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 0 16px;
  transition: border-color .15s;
}
.store-page .cart-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.store-page .cart-input svg { color: #64748b; flex-shrink: 0; }
.store-page .cart-input input {
  background: transparent;
  border: none;
  color: #fff;
  padding: 14px 0;
  width: 100%;
  font-size: 14px;
}
.store-page .cart-input input::placeholder { color: #64748b; }
.store-page .cart-input input:focus { box-shadow: none; outline: none; }

/* Footer */
.store-page .cart-drawer__foot {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 20px 24px 24px;
  background: #0a1220;
  flex-shrink: 0;
}
.store-page .cart-drawer__total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 8px;
}

/* ===== Cart breakdown (subtotal + extras) ===== */
.cart-breakdown {
  margin: 12px 0 4px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  font-size: 13px;
  display: grid; gap: 8px;
}
.cart-breakdown__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  color: #cbd5e1;
}
.cart-breakdown__row[hidden] { display: none; }
.cart-breakdown__row > span:not(.cart-extra-name) { grid-column: 1 / 3; }
.cart-breakdown__row strong { color: #f1f5f9; font-weight: 700; font-size: 14px; }
.cart-breakdown__row strong.is-off { color: #64748b; text-decoration: line-through; font-weight: 500; }
.cart-extra-name { font-size: 13px; }
.cart-extra-name small { color: #94a3b8; font-size: 11px; }
.cart-extra-toggle { position: relative; display: inline-block; width: 34px; height: 20px; flex-shrink: 0; cursor: pointer; }
.cart-extra-toggle input { opacity: 0; position: absolute; inset: 0; cursor: pointer; }
.cart-extra-toggle span {
  position: absolute; inset: 0;
  background: rgba(148,163,184,0.3);
  border-radius: 12px;
  transition: background .2s;
}
.cart-extra-toggle span::before {
  content: ''; position: absolute;
  top: 2px; left: 2px; width: 16px; height: 16px;
  background: #fff; border-radius: 50%; transition: transform .2s;
}
.cart-extra-toggle input:checked + span { background: var(--accent, #10b981); }
.cart-extra-toggle input:checked + span::before { transform: translateX(14px); }

/* Light theme variant */
.store-page--light .cart-breakdown {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
.store-page--light .cart-breakdown__row { color: #475569 !important; }
.store-page--light .cart-breakdown__row strong { color: #0f172a !important; }

/* Custom payment instructions panel */
.pm-instructions {
  white-space: pre-wrap;
  font-size: 13px;
  color: #cbd5e1;
  background: rgba(255,255,255,0.04);
  padding: 12px 14px;
  border-radius: 10px;
  border-left: 3px solid var(--accent, #10b981);
  line-height: 1.5;
}
.store-page--light .pm-instructions {
  color: #334155 !important;
  background: #f8fafc !important;
}
.store-page .cart-drawer__total span {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.store-page .cart-drawer__total strong {
  color: var(--accent);
  font-size: 26px;
  font-weight: 800;
}
.store-page .cart-drawer__note {
  color: #64748b;
  font-size: 11px;
  font-style: italic;
  text-align: center;
  margin: 8px 0 14px;
}

/* Send WhatsApp button — uses the store's accent color */
.store-page .btn-cart-send {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 16px 24px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: transform .15s;
}
.store-page .btn-cart-send:hover { transform: translateY(-2px); }
.store-page .btn-cart-send svg {
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  padding: 4px;
  width: 28px; height: 28px;
}

/* =====================================================================
   Bottom nav — modern floating pill (estilo Instagram / Airbnb)
   ===================================================================== */
.store-page .bottom-nav {
  position: fixed;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 24px));
  background: rgba(15,23,41,0.85);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 30;
  gap: 4px;
}
/* Hide bottom "small" labels — icon-only */
.store-page .bottom-nav__item small,
.store-page .bottom-nav__item .bottom-nav__label { display: none; }

.store-page .bottom-nav__item {
  position: relative;
  color: #94a3b8;
  flex: 1;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  transition: all .2s;
  text-decoration: none;
  min-width: 44px; height: 44px;
}
.store-page .bottom-nav__item:hover {
  color: #fff;
  background: rgba(255,255,255,0.06);
  transform: scale(1.06);
}
.store-page .bottom-nav__item.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #fff));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 45%, transparent);
}
.store-page .bottom-nav__item svg { width: 22px; height: 22px; }
.store-page .bottom-nav__flag {
  width: 22px; height: 22px; border-radius: 50%;
  margin: 0;
}

/* Cart — más grande, centrado, elevado (como una FAB integrada) */
.store-page .bottom-nav__cart {
  position: relative;
  flex: 0 0 auto;
  width: 56px; height: 56px;
  min-width: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 75%, #000));
  color: #fff; border: 2px solid rgba(255,255,255,0.15);
  display: inline-flex; align-items: center; justify-content: center;
  margin: -14px 4px 0; /* sale un poco hacia arriba */
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 50%, transparent),
              inset 0 1px 0 rgba(255,255,255,0.2);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.store-page .bottom-nav__cart:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 60%, transparent);
}
.store-page .bottom-nav__cart:active { transform: scale(0.96); }
.store-page .bottom-nav__cart svg { width: 24px; height: 24px; }

/* Badges — unificados (cart + wishlist): mismo tamaño, misma forma, misma posición relativa al ícono */
.store-page .bottom-nav__cart .bottom-nav__badge,
.store-page .bottom-nav__item [data-wish-badge] {
  position: absolute;
  background: #ef4444;
  color: #fff;
  border: 2px solid #0f1729;
  font-size: 10px; font-weight: 800;
  padding: 0 5px;
  min-width: 18px; height: 18px;
  line-height: 1;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(239,68,68,0.4);
  transform: none;
}
/* Cart: pegado a la esquina superior-derecha del círculo grande */
.store-page .bottom-nav__cart .bottom-nav__badge {
  top: -2px; right: -2px;
}
/* Wish: centrado sobre la esquina superior-derecha del ícono SVG */
.store-page .bottom-nav__item [data-wish-badge] {
  top: 0; right: 8px;
  left: auto;
}

/* Light theme — fondo claro translúcido con íconos oscuros */
.store-page--light .bottom-nav {
  background: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.9);
  box-shadow: 0 12px 40px rgba(15,23,42,0.18);
}
.store-page--light .bottom-nav__item { color: #64748b; }
.store-page--light .bottom-nav__item:hover { color: #0f172a; background: rgba(15,23,42,0.05); }
.store-page--light .bottom-nav__item.is-active { color: #fff; }
.store-page--light .bottom-nav__cart { border-color: rgba(255,255,255,0.5); }
.store-page--light .bottom-nav__cart .bottom-nav__badge { border-color: #fff; }
.store-page--light .bottom-nav__item [data-wish-badge] { border-color: rgba(255,255,255,0.95); }

/* Padding-bottom in catalog so content no se tapa con la nav */
.store-page .catalog { padding-bottom: 100px !important; }

/* =====================================================================
   ⭐ Wishlist drawer (lista de favoritos)
   ===================================================================== */
.wish-drawer {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  max-width: 96vw !important;
  max-height: 92vh !important;
}
.wish-drawer::backdrop {
  background: rgba(10,14,30,0.55);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
.wish-drawer[open] { animation: modalIn .3s cubic-bezier(.34,1.56,.64,1); }
.wish-drawer__card {
  background: #0f1729;
  color: #e6e8ee;
  width: min(520px, 96vw);
  max-height: 88vh;
  border-radius: 24px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.wish-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.wish-drawer__head h2 {
  margin: 0; font-size: 20px; font-weight: 800;
  background: linear-gradient(90deg,#ef4444,#ec4899);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -0.01em;
}
.wish-drawer__close {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: #fff; border: none;
  font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.wish-drawer__close:hover { background: rgba(255,255,255,0.15); transform: rotate(90deg); }
.wish-drawer__body {
  flex: 1; overflow-y: auto;
  padding: 16px 20px 20px;
  display: grid; gap: 12px;
}

.wish-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  padding: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  transition: background .15s;
}
.wish-item:hover { background: rgba(255,255,255,0.07); }
.wish-item img, .wish-item__empty {
  width: 72px; height: 72px;
  object-fit: cover;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
}
.wish-item__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wish-item__name {
  margin: 0; font-size: 14px; font-weight: 600; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wish-item__price { margin: 0; color: var(--accent, #3b82f6); font-weight: 800; font-size: 16px; }
.wish-item__actions { display: flex; gap: 6px; margin-top: 4px; }
.wish-item__actions .btn { padding: 6px 10px; height: auto; font-size: 12px; }
.wish-item__actions [data-wish-remove] {
  width: 34px; height: 34px; padding: 0;
  background: rgba(239,68,68,0.1); color: #ef4444;
  border: 1px solid rgba(239,68,68,0.2);
  flex-shrink: 0;
}
.wish-item__actions [data-wish-remove]:hover { background: rgba(239,68,68,0.2); }

.wish-empty {
  text-align: center; padding: 40px 20px;
}
.wish-empty__icon {
  font-size: 64px; opacity: 0.3; margin-bottom: 12px;
}
.wish-empty h3 { margin: 0 0 8px; color: #fff; font-size: 18px; }
.wish-empty p { margin: 0 0 20px; color: #94a3b8; font-size: 14px; }

/* Light theme variant */
.store-page--light ~ #wishDrawer .wish-drawer__card,
body:has(.store-page--light) .wish-drawer__card {
  background: #fff;
  color: #0f172a;
}
body:has(.store-page--light) .wish-drawer__head { border-bottom-color: #e2e8f0; }
body:has(.store-page--light) .wish-drawer__close { background: #f1f5f9; color: #64748b; }
body:has(.store-page--light) .wish-drawer__close:hover { background: #e2e8f0; color: #0f172a; }
body:has(.store-page--light) .wish-item {
  background: #f8fafc; border-color: #e2e8f0;
}
body:has(.store-page--light) .wish-item:hover { background: #f1f5f9; }
body:has(.store-page--light) .wish-item img, body:has(.store-page--light) .wish-item__empty { background: #f1f5f9; }
body:has(.store-page--light) .wish-item__name { color: #0f172a; }
body:has(.store-page--light) .wish-empty h3 { color: #0f172a; }
body:has(.store-page--light) .wish-empty p { color: #64748b; }

/* =====================================================================
   🔔 Notification bell (dashboard header)
   ===================================================================== */
/* Notification bell wrapper */
.notif-wrap { position: relative; }
.notif-bell {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  color: #64748b;
  transition: all .15s;
  text-decoration: none;
  border: none; background: none; cursor: pointer;
}
.notif-bell--lg { width: 48px; height: 48px; border-radius: 12px; background: #f1f5f9; }
.notif-bell:hover { background: #e2e8f0; color: #0f172a; }
.notif-bell.is-pulse { animation: bellShake 1s ease-in-out 3; color: #ef4444; background: #fef2f2; }
@keyframes bellShake {
  0%,100% { transform: rotate(0); }
  10%,30%,50%,70%,90% { transform: rotate(-12deg); }
  20%,40%,60%,80% { transform: rotate(12deg); }
}
.notif-bell__dot {
  position: absolute; top: 2px; right: 2px;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: #ef4444; color: #fff;
  font-size: 11px; font-weight: 800;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(239,68,68,0.4);
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%,100% { box-shadow: 0 2px 8px rgba(239,68,68,0.4); }
  50% { box-shadow: 0 2px 16px rgba(239,68,68,0.7); }
}

/* Notification dropdown panel */
.notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 340px; max-height: 400px;
  background: #fff; border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
  z-index: 1000; overflow: hidden;
  animation: notifSlide .2s ease-out;
}
@keyframes notifSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.notif-panel__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
}
.notif-panel__head strong { font-size: 15px; }
.notif-panel__link { font-size: 13px; color: #3b82f6; text-decoration: none; font-weight: 500; }
.notif-panel__link:hover { text-decoration: underline; }
.notif-panel__list { overflow-y: auto; max-height: 320px; }
.notif-panel__empty { text-align: center; padding: 32px 16px; color: #94a3b8; font-size: 14px; }

/* Individual notification item */
.notif-item {
  display: block; padding: 12px 16px;
  text-decoration: none; color: inherit;
  border-bottom: 1px solid #f8fafc;
  transition: background .1s;
}
.notif-item:hover { background: #f8fafc; }
.notif-item__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.notif-item__row--meta { margin-top: 4px; }
.notif-item__name { font-weight: 600; font-size: 14px; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.notif-item__amount { font-weight: 700; font-size: 14px; color: #16a34a; white-space: nowrap; }
.notif-item__status { font-size: 12px; color: #64748b; }
.notif-item__time { font-size: 12px; color: #94a3b8; white-space: nowrap; }

@media (max-width: 600px) {
  .notif-panel { width: calc(100vw - 24px); right: -12px; }
}

/* =====================================================================
   🛒 Abandoned carts dashboard
   ===================================================================== */
.aband-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.aband-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #f59e0b;
  border-radius: 12px;
  padding: 16px;
}
.aband-card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.aband-card__head strong { display: block; color: #0f172a; font-size: 14px; }
.aband-card__head small { color: #64748b; font-size: 12px; }
.aband-card__items {
  list-style: none; margin: 0 0 10px; padding: 0;
  font-size: 12px; color: #475569;
  display: grid; gap: 2px;
}
.aband-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px; border-top: 1px solid #f1f5f9;
}
.aband-card__actions { display: flex; gap: 6px; }

/* =====================================================================
   Catalog toolbar — Filtros + Orden, tipografía editorial
   ===================================================================== */
.store-page .catalog-toolbar-wrap {
  padding: 10px 20px 4px;
  width: 100%;
}
.store-page .catalog-toolbar {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: nowrap;
}
.store-page .catalog-toolbar__btn,
.store-page .catalog-toolbar__sort {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  color: #cbd5e1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all .2s;
}
.store-page .catalog-toolbar__btn {
  display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.store-page .catalog-toolbar__btn:hover,
.store-page .catalog-toolbar__sort:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.14);
}
.store-page .catalog-toolbar__btn[aria-expanded="true"] {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 40%, transparent);
}
.store-page .catalog-toolbar__count {
  min-width: 20px;
  padding: 2px 7px;
  background: #fff;
  color: var(--accent);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}
.store-page .catalog-toolbar__sort {
  margin-left: auto;
  appearance: none; -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2.6' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.store-page .catalog-toolbar__sort option {
  background: #0f1729; color: #fff;
  font-size: 13px; font-weight: 500;
  text-transform: none; letter-spacing: 0;
}

/* =====================================================================
   Catalog filter panel — COMPACTO: 2 líneas máximo
   ===================================================================== */
.store-page .catalog-filter-panel {
  margin-top: 10px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: #e2e8f0;
  animation: fadeUp .2s ease;
  display: grid; gap: 10px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* Línea 1: Precio todo en UNA fila */
.store-page .catalog-filter-panel__price-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.store-page .catalog-filter-panel__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
  white-space: nowrap;
}
.store-page .catalog-filter-panel__price-val {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Línea 2: Chips horizontales */
.store-page .catalog-filter-panel__chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.store-page .catalog-filter-panel__chips::-webkit-scrollbar { display: none; }

/* Slider compact */
.store-page .catalog-filter-panel input[type="range"] {
  width: 100%; height: 4px;
  appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  margin: 0;
}
.store-page .catalog-filter-panel input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px;
  background: #fff;
  border: 2.5px solid var(--accent);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transition: transform .15s;
}
.store-page .catalog-filter-panel input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.store-page .catalog-filter-panel input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  background: #fff;
  border: 2.5px solid var(--accent);
  border-radius: 50%;
  cursor: pointer;
}

/* Chips — pequeños y uniformes */
.store-page .filter-chip {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #cbd5e1;
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s;
  backdrop-filter: blur(10px);
  font-family: inherit;
  flex-shrink: 0;
}
.store-page .filter-chip input[type="checkbox"] {
  position: absolute;
  opacity: 0; pointer-events: none;
  width: 0; height: 0;
}
.store-page .filter-chip span {
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.store-page .filter-chip:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.14);
}
.store-page .filter-chip:has(input:checked) {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Reset button — ícono circular ↺ */
.store-page .catalog-filter-panel__reset {
  width: 32px; height: 32px;
  padding: 0;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: #94a3b8;
  border-radius: 50%;
  font-family: inherit;
  font-size: 16px; line-height: 1;
  cursor: pointer;
  transition: all .2s;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: auto; /* se alinea a la derecha */
}
.store-page .catalog-filter-panel__reset:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
  transform: rotate(-90deg);
}

/* =====================================================================
   Responsive — bottom sheet floating above bottom-nav
   ===================================================================== */
@media (max-width: 640px) {
  .store-page .catalog-toolbar-wrap { padding: 8px 14px 4px; }
  .store-page .catalog-toolbar { gap: 8px; }
  .store-page .catalog-toolbar__btn,
  .store-page .catalog-toolbar__sort {
    flex: 1;
    padding: 10px 14px;
    font-size: 11px;
    letter-spacing: 0.05em;
    justify-content: center;
    min-width: 0;
  }
  .store-page .catalog-toolbar__sort { margin-left: 0; }

  .store-page .catalog-filter-panel {
    position: fixed;
    left: 12px; right: 12px;
    bottom: 92px;
    margin: 0;
    padding: 10px 14px 12px;
    gap: 8px;
    border-radius: 16px;
    background: rgba(15,23,41,0.97);
    border: 1px solid rgba(255,255,255,0.1);
    z-index: 200;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    animation: sheetSlideUp .3s cubic-bezier(.34,1.56,.64,1);
  }
  .store-page .catalog-filter-panel::before {
    content: '';
    display: block;
    width: 32px; height: 3px;
    background: rgba(255,255,255,0.2);
    border-radius: 999px;
    margin: 0 auto 4px;
  }
  .store-page .catalog-filter-panel__price-row { gap: 10px; }
  .store-page .filter-chip span { padding: 6px 12px; font-size: 10px; letter-spacing: 0.05em; }
  .store-page.is-filter-open .bottom-nav { z-index: 250; }
  .store-page.is-filter-open::before {
    content: '';
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 199;
    animation: fadeIn .2s ease;
  }
  @keyframes sheetSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

  .store-page .filter-chip span { padding: 9px 14px; font-size: 11px; letter-spacing: 0.06em; }
  .store-page .catalog-filter-panel__row--checks { gap: 6px; }
}

/* =====================================================================
   Light theme — glass blanco sobre el pastel
   ===================================================================== */
.store-page--light .catalog-toolbar__btn,
.store-page--light .catalog-toolbar__sort {
  background: rgba(255,255,255,0.82);
  border-color: rgba(255,255,255,0.92);
  color: #475569;
  box-shadow: 0 2px 10px rgba(99,102,241,0.06);
}
.store-page--light .catalog-toolbar__btn:hover,
.store-page--light .catalog-toolbar__sort:hover {
  background: #fff;
  color: #0f172a;
}
.store-page--light .catalog-toolbar__sort {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.6' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.store-page--light .catalog-toolbar__sort option { background: #fff; color: #0f172a; }
.store-page--light .catalog-filter-panel {
  background: rgba(255,255,255,0.78);
  border-color: rgba(255,255,255,0.9);
  color: #0f172a;
  box-shadow: 0 10px 30px rgba(99,102,241,0.1);
}
.store-page--light .catalog-filter-panel__label { color: #64748b; }
.store-page--light .filter-chip {
  background: rgba(255,255,255,0.82);
  border-color: rgba(255,255,255,0.9);
  color: #475569;
}
.store-page--light .filter-chip:hover { background: #fff; color: #0f172a; }
.store-page--light .catalog-filter-panel input[type="range"] { background: #cbd5e1; }
.store-page--light .catalog-filter-panel__reset {
  border-color: rgba(15,23,42,0.1);
  color: #64748b;
}
.store-page--light .catalog-filter-panel__reset:hover {
  background: rgba(15,23,42,0.05);
  color: #0f172a;
}

/* ----- (legacy duplicate block — kept inert, no longer applies) ----- */
.store-page .catalog-filter-panel-NONE {
  margin-top: 8px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #e2e8f0;
  animation: fadeUp .2s ease;
  display: grid; gap: 14px;
}
.store-page .catalog-filter-panel__row {
  display: flex; flex-direction: column; gap: 8px;
}
.store-page .catalog-filter-panel__head {
  display: flex; align-items: center; justify-content: space-between;
}
.store-page .catalog-filter-panel__row--checks {
  flex-direction: row; flex-wrap: wrap; gap: 8px;
}

/* Chip-style check options — completo pill, el checkbox real queda oculto */
.store-page .filter-chip {
  display: inline-flex; align-items: center;
  padding: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #cbd5e1;
  border-radius: 999px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .15s;
  backdrop-filter: blur(12px);
}
.store-page .filter-chip input[type="checkbox"] {
  position: absolute;
  opacity: 0; pointer-events: none;
  width: 0; height: 0;
}
.store-page .filter-chip span {
  padding: 8px 16px;
  display: inline-block;
}
.store-page .filter-chip:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.store-page .filter-chip:has(input:checked) {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 45%, transparent);
}

.store-page .catalog-filter-panel__label {
  font-size: 10px; font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.store-page .catalog-filter-panel__price-val {
  font-size: 14px; font-weight: 800;
  color: var(--accent);
}

/* Range slider */
.store-page .catalog-filter-panel input[type="range"] {
  width: 100%; height: 6px;
  appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  margin: 2px 0;
}
.store-page .catalog-filter-panel input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px;
  background: #fff;
  border: 3px solid var(--accent);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.store-page .catalog-filter-panel input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  background: #fff;
  border: 3px solid var(--accent);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.store-page .catalog-filter-panel__reset {
  justify-self: start;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  color: #94a3b8;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all .15s;
  align-self: start;
}
.store-page .catalog-filter-panel__reset:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

/* ====== Responsive ====== */
@media (max-width: 640px) {
  .store-page .catalog-toolbar-wrap { padding: 8px 14px 4px; }
  .store-page .catalog-toolbar { gap: 8px; }
  .store-page .catalog-toolbar__btn,
  .store-page .catalog-toolbar__sort {
    padding: 8px 14px; font-size: 11px;
    letter-spacing: 0.03em;
    flex: 1;
    justify-content: center;
    min-width: 0;
  }
  .store-page .catalog-toolbar__sort { margin-left: 0; }

  /* 📱 Mobile: panel becomes a floating sheet above the bottom-nav */
  .store-page .catalog-filter-panel {
    position: fixed;
    left: 12px; right: 12px;
    bottom: 92px; /* deja espacio a la bottom-nav que flota abajo */
    margin: 0;
    padding: 18px 16px 16px;
    border-radius: 24px;
    background: rgba(15,23,41,0.96);
    border: 1px solid rgba(255,255,255,0.1);
    z-index: 200;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    animation: sheetSlideUp .3s cubic-bezier(.34,1.56,.64,1);
  }
  /* Bottom-nav stays ON TOP of backdrop + filter sheet so cart is always reachable */
  .store-page.is-filter-open .bottom-nav {
    z-index: 250;
  }
  .store-page .catalog-filter-panel::before {
    content: '';
    display: block;
    width: 40px; height: 4px;
    background: rgba(255,255,255,0.25);
    border-radius: 999px;
    margin: -4px auto 12px;
  }
  .store-page--light .catalog-filter-panel {
    background: rgba(255,255,255,0.98);
    border-top-color: rgba(15,23,42,0.08);
  }
  .store-page--light .catalog-filter-panel::before {
    background: rgba(15,23,42,0.2);
  }

  /* Backdrop when sheet is open */
  .store-page.is-filter-open::before {
    content: '';
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 199;
    animation: fadeIn .2s ease;
  }
  @keyframes sheetSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

  .store-page .filter-chip span { padding: 9px 14px; font-size: 12px; letter-spacing: 0.02em; }
  .store-page .catalog-filter-panel__row--checks { gap: 6px; }
}

/* ====== Light theme — glass blanco ====== */
.store-page--light .catalog-toolbar__btn,
.store-page--light .catalog-toolbar__sort {
  background: rgba(255,255,255,0.8);
  border-color: rgba(255,255,255,0.9);
  color: #475569;
  box-shadow: 0 2px 8px rgba(99,102,241,0.06);
}
.store-page--light .catalog-toolbar__btn:hover,
.store-page--light .catalog-toolbar__sort:hover {
  background: #fff; color: #0f172a;
}
.store-page--light .catalog-toolbar__sort {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
.store-page--light .catalog-toolbar__sort option { background: #fff; color: #0f172a; }
.store-page--light .catalog-filter-panel {
  background: rgba(255,255,255,0.75);
  border-color: rgba(255,255,255,0.9);
  color: #0f172a;
  box-shadow: 0 10px 30px rgba(99,102,241,0.08);
}
.store-page--light .catalog-filter-panel__label { color: #64748b; }
.store-page--light .filter-chip {
  background: rgba(255,255,255,0.8);
  border-color: rgba(255,255,255,0.9);
  color: #475569;
}
.store-page--light .filter-chip:hover {
  background: #fff; color: #0f172a;
}
.store-page--light .catalog-filter-panel input[type="range"] { background: #e2e8f0; }
.store-page--light .catalog-filter-panel__reset {
  border-color: rgba(15,23,42,0.1);
  color: #64748b;
}
.store-page--light .catalog-filter-panel__reset:hover {
  background: rgba(15,23,42,0.05);
  color: #0f172a;
}

/* =====================================================================
   Gallery swipe zoom (product modal)
   ===================================================================== */
.pmodal__media img { cursor: zoom-in; transition: transform .3s ease; }
.pmodal__media img.is-zoomed {
  transform: scale(1.6);
  cursor: zoom-out;
}

/* =====================================================================
   Related products in modal
   ===================================================================== */
.pmodal__related { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.08); }
.pmodal__related-title { margin: 0 0 12px; font-size: 14px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.8; }
.pmodal__related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 600px) { .pmodal__related-grid { grid-template-columns: repeat(2, 1fr); } }
.pmodal__related-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px; border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  text-align: left;
  font-family: inherit; color: inherit;
  transition: all .15s;
}
.pmodal__related-card:hover { transform: translateY(-2px); background: rgba(255,255,255,0.08); }
.pmodal__related-card img, .pmodal__related-empty {
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  border-radius: 8px; background: rgba(255,255,255,0.04);
}
.pmodal__related-name {
  font-size: 12px; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pmodal__related-card strong { font-size: 13px; color: var(--accent); font-weight: 800; }

/* =====================================================================
   ⭐ Reviews block in product modal (stars summary + rotating comment)
   ===================================================================== */
.pmodal__reviews {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.pmodal__reviews-empty {
  display: flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,0.4);
  font-size: 12px;
}
.pmodal__reviews-empty .stars-mini { font-size: 18px; }

/* Summary row — stars + average */
.pmodal__reviews-summary {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.pmodal__reviews-num {
  font-size: 28px; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pmodal__reviews-meta { display: flex; flex-direction: column; gap: 2px; }
.stars-mini--big { font-size: 18px; letter-spacing: 2px; }
.pmodal__reviews-meta small { font-size: 11px; opacity: 0.65; }

/* Rotator — 3 comments (desktop) / 1 comment (mobile) */
.pmodal__review-rotator {
  position: relative;
  padding-bottom: 24px;
}
.pmodal__review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  animation: rvFade .4s ease;
}
@keyframes rvFade {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 760px) {
  .pmodal__review-grid { grid-template-columns: 1fr; }
  /* En mobile solo muestra 1, más grande */
  .pmodal__review-item { min-height: 110px; padding: 14px 16px; }
  .pmodal__review-comment { font-size: 13px; -webkit-line-clamp: 5; }
  .pmodal__review-rotator { padding: 0 30px 26px; }
}

/* Flechas de navegación (solo cuando hay más de 1 página) */
.pmodal__review-nav {
  position: absolute;
  top: 50%; transform: translateY(-60%);
  width: 28px; height: 28px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  border-radius: 50%;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: none; /* solo mobile */
  align-items: center; justify-content: center;
  transition: all .15s;
}
.pmodal__review-nav:hover { background: rgba(255,255,255,0.2); transform: translateY(-60%) scale(1.1); }
.pmodal__review-nav--prev { left: -2px; }
.pmodal__review-nav--next { right: -2px; }
@media (max-width: 760px) {
  .pmodal__review-nav { display: inline-flex; }
}
.store-page--light .pmodal__review-nav {
  background: rgba(15,23,42,0.08);
  border-color: rgba(15,23,42,0.12);
  color: #0f172a;
}
.store-page--light .pmodal__review-nav:hover { background: rgba(15,23,42,0.15); }

.pmodal__review-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex; flex-direction: column;
  min-height: 90px;
}
.pmodal__review-comment {
  margin: 0 0 10px;
  font-size: 12px; line-height: 1.5;
  color: rgba(255,255,255,0.85);
  font-style: italic;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pmodal__review-comment::before { content: '“'; opacity: 0.5; margin-right: 1px; }
.pmodal__review-comment::after  { content: '”'; opacity: 0.5; margin-left: 1px; }
.pmodal__review-who {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 8px;
}
.pmodal__review-who strong { font-size: 11px; font-weight: 700; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmodal__review-who .stars-mini { font-size: 11px; flex-shrink: 0; }

/* Dots — centrados abajo */
.pmodal__review-dots {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 5px;
}
.pmodal__review-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: none;
  cursor: pointer;
  transition: all .2s;
  padding: 0;
}
.pmodal__review-dot:hover { background: rgba(255,255,255,0.4); }
.pmodal__review-dot.is-active {
  background: #fbbf24;
  width: 22px;
  border-radius: 999px;
}

/* Light theme */
.store-page--light .pmodal__reviews { border-top-color: #e2e8f0; }
.store-page--light .pmodal__review-item { background: #f8fafc; border-color: #e2e8f0; }
.store-page--light .pmodal__review-comment { color: #334155; }
.store-page--light .pmodal__review-who { border-top-color: #e2e8f0; }
.store-page--light .pmodal__review-who strong { color: #475569; }
.store-page--light .pmodal__reviews-empty { color: #94a3b8; }
.store-page--light .pmodal__review-dot { background: #cbd5e1; }
.store-page--light .pmodal__review-dot.is-active { background: #f59e0b; }

/* Disabled qty button when stock limit hit */
.pmodal__qty button:disabled { opacity: 0.35; cursor: not-allowed; }
.badge.is-limit { animation: shakeLimit .3s ease; }
@keyframes shakeLimit {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* =====================================================================
   ⭐ Reviews — stars mini (product cards) + public form + dashboard
   ===================================================================== */
.store-rating-badge {
  display: inline-flex !important; align-items: center; gap: 6px;
  background: rgba(251,191,36,0.15) !important;
  border: 1px solid rgba(251,191,36,0.4) !important;
  color: #fbbf24 !important;
  font-weight: 700;
}
.store-rating-badge strong { color: #fbbf24; }
.store-rating-badge small { color: rgba(255,255,255,0.7); font-weight: 500; }

.product-card__rating {
  display: flex; align-items: center; gap: 6px;
  margin: 2px 0 4px;
  font-size: 11px; color: #64748b;
}
.stars-mini { display: inline-flex; letter-spacing: 1px; font-size: 13px; color: #cbd5e1; }
.stars-mini span.on { color: #fbbf24; }
.product-card__rating small { color: #94a3b8; font-size: 11px; }

/* Public review form */
.rv-page {
  max-width: 500px; margin: 32px auto; padding: 0 20px;
}
.rv-head { text-align: center; margin-bottom: 20px; }
.rv-head__logo {
  width: 72px; height: 72px; border-radius: 50%;
  object-fit: cover; margin: 0 auto 10px; display: block;
  background: linear-gradient(135deg, #ef4444, #ec4899);
  color: #fff; font-size: 28px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.rv-head__logo--empty {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 28px; font-weight: 800;
}
.rv-head h1 { margin: 0 0 4px; font-size: 24px; color: #0f172a; }
.rv-card {
  background: #fff; border-radius: 20px;
  padding: 28px 24px; box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.rv-card h2 { margin: 0 0 6px; font-size: 20px; color: #0f172a; }
.rv-card > p.muted { margin: 0 0 20px; font-size: 14px; }
.rv-card label { display: block; font-size: 13px; font-weight: 600; color: #475569; margin-bottom: 14px; }
.rv-card input[type="text"], .rv-card textarea {
  width: 100%; margin-top: 4px;
  padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 10px;
  font-family: inherit; font-size: 14px;
}
.rv-card textarea { resize: vertical; min-height: 80px; }
.rv-card .btn--block { width: 100%; margin-top: 4px; }
.rv-card__foot { text-align: center; font-size: 12px; margin-top: 12px; }
.rv-card--done { text-align: center; padding: 40px 24px; }
.rv-card__icon { font-size: 56px; margin-bottom: 12px; }

/* 5-star rating input — clickable stars */
.rv-stars {
  border: none; padding: 0; margin: 0 0 20px;
  display: inline-flex; flex-direction: row-reverse;
  justify-content: center;
  gap: 4px;
  width: 100%;
}
.rv-stars input { position: absolute; opacity: 0; pointer-events: none; }
.rv-stars label {
  font-size: 40px; color: #e2e8f0;
  cursor: pointer; transition: transform .15s, color .15s;
  margin: 0;
}
.rv-stars label:hover,
.rv-stars label:hover ~ label,
.rv-stars input:checked ~ label {
  color: #fbbf24;
}
.rv-stars label:hover { transform: scale(1.2); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Dashboard reviews index */
.rv-stats {
  display: flex; gap: 24px; align-items: center;
  margin-bottom: 20px; padding: 24px;
}
.rv-stats__main { text-align: center; }
.rv-stats__num {
  font-size: 48px; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rv-stats__stars-static {
  font-size: 22px; letter-spacing: 2px; color: #e2e8f0;
  margin: 6px 0 2px;
}
.rv-stats__stars-static span.on { color: #fbbf24; }
.rv-stats__tip {
  flex: 1; font-size: 13px; color: #475569; line-height: 1.5;
  padding-left: 24px; border-left: 1px solid #e2e8f0;
}
.reviews-list { display: grid; gap: 12px; }
.rv-item {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 14px; padding: 16px 18px;
  transition: all .15s;
}
.rv-item.is-hidden { opacity: 0.55; background: #f8fafc; }
.rv-item__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 8px;
}
.rv-item__head strong { font-size: 14px; color: #0f172a; }
.rv-item__stars {
  font-size: 14px; letter-spacing: 1px; color: #e2e8f0;
  white-space: nowrap;
}
.rv-item__stars span.on { color: #fbbf24; }
.rv-item__text { margin: 0 0 10px; font-size: 14px; color: #334155; line-height: 1.5; }
.rv-item__photo {
  max-width: 160px; max-height: 160px;
  border-radius: 10px; margin: 4px 0 10px; display: block;
  object-fit: cover;
}
.rv-item__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 8px; border-top: 1px solid #f1f5f9;
}
.rv-item__actions { display: flex; gap: 4px; }

@media (max-width: 600px) {
  .rv-stats { flex-direction: column; text-align: center; }
  .rv-stats__tip { border-left: none; border-top: 1px solid #e2e8f0; padding: 18px 0 0; }
}

/* =====================================================================
   🎟 Coupon input inside cart drawer
   ===================================================================== */
.cart-coupon {
  margin: 8px 0 12px;
  padding: 12px 14px;
  background: rgba(16,185,129,0.06);
  border: 1px dashed rgba(16,185,129,0.3);
  border-radius: 12px;
}
.cart-coupon__toggle {
  background: none; border: none;
  color: #10b981; font-weight: 700; font-size: 13px;
  cursor: pointer; padding: 0;
  width: 100%; text-align: left;
}
.cart-coupon__toggle:hover { color: #059669; }
.cart-coupon__form {
  display: flex; gap: 8px; margin-top: 10px;
}
.cart-coupon__form input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.05em;
}
.cart-coupon__msg {
  margin: 8px 0 0; padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px; font-weight: 600;
}
.cart-coupon__msg--success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.cart-coupon__msg--error   { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.cart-coupon__msg--info    { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }

/* Discount row in breakdown */
.cart-breakdown__row--discount {
  position: relative;
  color: #10b981 !important;
}
.cart-breakdown__row--discount strong { color: #10b981 !important; font-weight: 800; }
.cart-coupon-remove {
  position: absolute;
  right: -6px; top: 50%; transform: translateY(-50%);
  background: rgba(239,68,68,0.1); color: #ef4444;
  border: none; border-radius: 50%;
  width: 22px; height: 22px; padding: 0;
  cursor: pointer; font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.cart-coupon-remove:hover { background: rgba(239,68,68,0.2); }

/* =====================================================================
   🎟 Coupons dashboard
   ===================================================================== */
.coupon-master {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
}
.coupon-master__info strong { font-size: 15px; color: #0f172a; }

.coupons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.coupon-card {
  background: #fff;
  border: 2px dashed #e2e8f0;
  border-radius: 16px;
  padding: 18px;
  position: relative;
  transition: all .15s;
}
.coupon-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.coupon-card.is-off  { opacity: 0.6; background: #f8fafc; }
.coupon-card.is-warn { border-color: #fbbf24; }
.coupon-card.is-on   { border-color: #10b981; }
.coupon-card__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.coupon-card__code {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 16px; font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.05em;
  background: #f1f5f9;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}
.coupon-card__status {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
}
.coupon-card__status--is-on   { background: #d1fae5; color: #065f46; }
.coupon-card__status--is-off  { background: #e2e8f0; color: #475569; }
.coupon-card__status--is-warn { background: #fef3c7; color: #92400e; }
.coupon-card__value {
  text-align: center;
  padding: 14px 0;
  border-top: 1px dashed #e2e8f0;
  border-bottom: 1px dashed #e2e8f0;
  margin-bottom: 12px;
}
.coupon-card__value strong {
  font-size: 32px; font-weight: 900;
  background: linear-gradient(135deg,#10b981,#059669);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.coupon-card__value small { display: block; color: #64748b; font-size: 12px; margin-top: 2px; }
.coupon-card__meta {
  list-style: none; margin: 0 0 12px; padding: 0;
  display: grid; gap: 4px;
  font-size: 12px; color: #475569;
}
.coupon-card__actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px solid #f1f5f9;
}

/* Bandera del país en store-actions-row (encima) */
.store-page .store-action--flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  cursor: default;
  pointer-events: none;
}
.store-page .store-action--flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* List view in dark store */
.store-page .catalog.catalog--list { grid-template-columns: 1fr !important; gap: 12px; }
.store-page .catalog.catalog--list .product-card {
  display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: center;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md); padding: 8px;
  min-width: 0; max-width: 100%;
  padding-right: 56px;
}
.store-page .catalog.catalog--list .product-card__media { aspect-ratio: 1/1; margin: 0; max-width: 90px; min-width: 0; }
.store-page .catalog.catalog--list .product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.store-page .catalog.catalog--list .product-card__add { width: 40px; height: 40px; bottom: auto; top: 50%; right: 12px; transform: translateY(-50%); background: var(--accent); color: #fff; border-radius: 50%; font-size: 24px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.25); border: none; z-index: 2; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.store-page .catalog.catalog--list .product-card:hover .product-card__add { transform: translateY(-50%) scale(1.15); box-shadow: 0 6px 16px rgba(0,0,0,0.3); }
.store-page .catalog.catalog--list .product-card__add:active { transform: translateY(-50%) scale(0.95); }
.store-page .catalog.catalog--list .product-card__body { padding: 0; min-width: 0; overflow: hidden; }
.store-page .catalog.catalog--list .product-card__name,
.store-page .catalog.catalog--list .product-card__price { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Storefront responsive */
@media (max-width: 880px) {
  .store-page .store-header { min-height: 320px; }
  .store-page .store-header__logo { width: 110px; height: 110px; }
  .store-page .store-header__name { font-size: 26px; }
  .store-page .store-actions-row { padding: 12px 16px; }
  .store-page .catalog { grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 16px; }
  .store-page .product-card__media { aspect-ratio: 4/5; }
  .store-page .product-card__name { font-size: 12px; }
  .store-page .product-card__price strong { font-size: 14px; }
  .store-page .cat-menu-wrap { padding: 12px 12px 6px; }
  .store-page .cat-menu .cat-pill { padding: 8px 14px; font-size: 10px; }
  .store-page .cat-menu-nav { width: 32px; height: 32px; font-size: 16px; }
}

/* (icons centered + view-toggle on the right) */
@media (max-width: 480px) {
  .store-page .store-header__logo { width: 96px; height: 96px; }
  .store-page .store-header__name { font-size: 22px; }
  .store-page .store-actions-row {
    padding: 10px 12px; gap: 8px;
    grid-template-columns: 1fr auto;
    max-width: 100%;
    overflow: hidden;
  }
  .store-page .store-actions {
    grid-column: 1; justify-self: start;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
    padding-bottom: 2px;
  }
  .store-page .store-actions::-webkit-scrollbar { display: none; }
  .store-page .store-action {
    width: 38px; height: 38px;
    flex-shrink: 0;
  }
  .store-page .store-action svg { width: 16px; height: 16px; }
  .store-page .store-actions-row .view-toggle {
    grid-column: 2; justify-self: end;
    flex-shrink: 0;
  }
  .store-page .view-toggle__btn { width: 34px; height: 34px; flex-shrink: 0; }
  .store-page .bottom-nav__cart { width: 54px; height: 54px; }
}

/* Tiny screens: iconos aún más compactos */
@media (max-width: 380px) {
  .store-page .store-actions-row { padding: 8px 10px; }
  .store-page .store-actions { gap: 4px; }
  .store-page .store-action { width: 34px; height: 34px; }
  .store-page .store-action svg { width: 14px; height: 14px; }
  .store-page .view-toggle__btn { width: 30px; height: 30px; }
}

/* =====================================================================
   PRODUCT LANDING PAGE — Conversion-focused single product
   ===================================================================== */
.landing {
  --accent: #2563eb;
  background: #fff;
  color: #0f172a;
  min-height: 100vh;
}

/* Sticky top bar */
.landing-bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 24px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.landing-bar__brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: #0f172a; font-weight: 700; text-decoration: none; font-size: 14px;
}
.landing-bar__brand img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.landing-bar__cta {
  background: var(--accent); color: #fff;
  padding: 8px 16px; border-radius: 999px;
  font-weight: 700; font-size: 13px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Hero */
.landing-hero {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; max-width: 1200px; margin: 0 auto;
  padding: 48px 24px;
  align-items: center;
}
.landing-hero__media { position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.15); }
.landing-hero__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1; display: block; }
.landing-discount {
  position: absolute; top: 16px; left: 16px;
  background: var(--accent); color: #fff;
  padding: 8px 14px; border-radius: 999px;
  font-weight: 800; font-size: 16px;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 40%, transparent);
}

.landing-hero__info { display: flex; flex-direction: column; gap: 16px; }
.landing-cat { color: #94a3b8; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; }
.landing-name {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin: 0;
}
.landing-price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 4px 0 8px; }
.landing-price strong { color: var(--accent); font-size: clamp(36px, 5vw, 52px); font-weight: 800; }
.landing-price__old { color: #94a3b8; text-decoration: line-through; font-size: 20px; }
.landing-price__save { background: #d1fae5; color: #047857; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }

.landing-desc { color: #475569; font-size: 16px; line-height: 1.6; margin: 0; }
.landing-benefits { display: grid; gap: 8px; padding: 0; margin: 12px 0; list-style: none; }
.landing-benefits li {
  color: #0f172a; font-size: 15px; font-weight: 500;
  background: #f0fdf4; border: 1px solid #bbf7d0;
  padding: 12px 16px; border-radius: 12px;
}

.landing-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff !important; text-decoration: none;
  padding: 18px 32px; border-radius: 999px;
  font-size: 15px; font-weight: 800; letter-spacing: 0.06em;
  box-shadow: 0 12px 30px rgba(37,211,102,0.40);
  transition: transform .15s;
  width: 100%;
}
.landing-cta:hover { transform: translateY(-2px); text-decoration: none; }
.landing-trust { text-align: center; color: #64748b; font-size: 13px; margin: 8px 0 0; }

/* Gallery */
.landing-gallery { max-width: 1200px; margin: 0 auto; padding: 24px; }
.landing-gallery h2 { font-size: 22px; margin-bottom: 16px; }
.landing-gallery__grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.landing-gallery__item {
  aspect-ratio: 1/1; padding: 0;
  border: 3px solid transparent; border-radius: 12px;
  background: #f1f5f9; cursor: pointer; overflow: hidden;
  transition: all .15s;
}
.landing-gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.landing-gallery__item:hover { transform: scale(1.03); }
.landing-gallery__item.is-active { border-color: var(--accent); box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 30%, transparent); }

/* Video */
.landing-video { max-width: 900px; margin: 0 auto; padding: 24px; }
.landing-video h2 { font-size: 22px; margin-bottom: 16px; text-align: center; }
.landing-video__wrap { aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); }
.landing-video__wrap iframe { width: 100%; height: 100%; border: none; }

/* Bottom CTA section */
.landing-cta-bottom {
  max-width: 600px; margin: 60px auto; padding: 48px 24px;
  text-align: center;
  background: linear-gradient(135deg, #f0f4ff, #ecfdf5);
  border-radius: 24px;
  border: 1px solid #e2e8f0;
}
.landing-cta-bottom h2 { font-size: 32px; margin-bottom: 8px; }
.landing-cta-bottom .landing-cta { max-width: 400px; margin: 16px auto 0; }

/* Floating WhatsApp FAB */
.landing-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 100;
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(37,211,102,0.50);
  text-decoration: none;
  animation: fab-pulse 2.5s infinite;
}
.landing-fab:hover { text-decoration: none; }

@keyframes fab-pulse {
  0%, 100% { box-shadow: 0 12px 30px rgba(37,211,102,0.50), 0 0 0 0 rgba(37,211,102,0.5); }
  50% { box-shadow: 0 12px 30px rgba(37,211,102,0.50), 0 0 0 16px rgba(37,211,102,0); }
}

/* Footer */
.landing-footer {
  text-align: center; padding: 32px 24px;
  border-top: 1px solid #e2e8f0;
  color: #94a3b8; font-size: 14px;
}
.landing-footer a { color: var(--accent); font-weight: 600; }

/* Urgency banner */
.landing-urgency {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #f59e0b;
  color: #78350f;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 14px;
  text-align: center;
  animation: pulse-soft 1.8s ease-in-out infinite;
}
@keyframes pulse-soft {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.01); }
}

/* Countdown */
.landing-countdown {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: #fff;
  padding: 18px 20px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.landing-countdown__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #fbbf24;
}
.landing-countdown__clock {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.landing-countdown__clock > div {
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 6px;
}
.landing-countdown__clock strong {
  display: block;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.landing-countdown__clock small {
  color: #94a3b8; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
}

/* Guarantee banner */
.landing-guarantee {
  max-width: 1000px; margin: 24px auto; padding: 0 24px;
}
.landing-guarantee__inner {
  display: flex; align-items: center; gap: 18px;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border: 2px solid #10b981;
  color: #065f46;
  padding: 20px 28px; border-radius: 16px;
}
.landing-guarantee svg { color: #10b981; flex-shrink: 0; }
.landing-guarantee strong { display: block; font-size: 16px; margin-bottom: 4px; }
.landing-guarantee p { margin: 0; font-size: 14px; }

/* Reviews */
.landing-reviews {
  max-width: 1200px; margin: 60px auto; padding: 0 24px;
}
.landing-reviews__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.landing-reviews h2 { margin: 0; font-size: 28px; }
.landing-reviews__avg {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff7ed; padding: 8px 16px; border-radius: 999px;
  border: 1px solid #fed7aa;
}
.landing-reviews__avg strong { color: #9a3412; font-size: 16px; }
.landing-reviews__avg small { color: #94a3b8; }

.landing-stars { display: inline-flex; gap: 2px; font-size: 18px; color: #cbd5e1; line-height: 1; }
.landing-stars span.is-on { color: #f59e0b; }

.landing-reviews__grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.landing-review {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
  padding: 22px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .2s, box-shadow .2s;
}
.landing-review:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.landing-review__text {
  margin: 0; color: #334155; font-size: 14px; line-height: 1.6; font-style: italic;
  flex: 1;
}
.landing-review__author { display: flex; align-items: center; gap: 12px; }
.landing-review__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #6366f1);
  color: #fff; font-weight: 800; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
.landing-review__author strong { display: block; color: #0f172a; font-size: 14px; }
.landing-review__author small { color: #10b981; font-size: 12px; font-weight: 600; }

/* FAQ */
.landing-faq {
  max-width: 800px; margin: 60px auto; padding: 0 24px;
}
.landing-faq h2 { text-align: center; font-size: 28px; margin-bottom: 24px; }
.landing-faq__list { display: grid; gap: 10px; }
.landing-faq__item {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  overflow: hidden; transition: border-color .15s;
}
.landing-faq__item[open] { border-color: var(--accent); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.landing-faq__item summary {
  padding: 18px 22px; cursor: pointer; font-weight: 600; color: #0f172a;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  list-style: none;
}
.landing-faq__item summary::-webkit-details-marker { display: none; }
.landing-faq__item summary svg { transition: transform .25s; flex-shrink: 0; color: var(--accent); }
.landing-faq__item[open] summary svg { transform: rotate(180deg); }
.landing-faq__item p {
  padding: 0 22px 18px; margin: 0; color: #475569; line-height: 1.6; font-size: 14px;
}

/* Upgrade banner (Starter users) */
.upgrade-banner {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  background: linear-gradient(135deg, #f0f9ff, #ecfdf5);
  border: 2px solid #10b981;
  border-radius: 16px;
  padding: 24px 28px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.upgrade-banner strong { color: #047857; font-size: 18px; display: block; margin-bottom: 6px; }
.upgrade-banner p { margin: 0; color: #334155; font-size: 14px; max-width: 600px; }

/* Share Landing modal */
.share-modal__card {
  background: #fff; border-radius: 24px; padding: 36px 32px 28px;
  width: min(480px, 96vw);
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1);
  position: relative;
}
.share-modal__close {
  position: absolute; top: 14px; right: 14px;
  background: #f1f5f9; border: none; color: #64748b;
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.share-modal__close:hover { background: #e2e8f0; color: #0f172a; transform: rotate(90deg); }
.share-modal__card h2 { margin: 0 0 6px; font-size: 22px; font-weight: 800; color: #0f172a; letter-spacing: -0.01em; }
.share-modal__label {
  display: block; color: var(--text-muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;
  margin: 18px 0 8px;
}

.share-modal__url {
  display: flex; gap: 8px; align-items: center;
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 6px;
}
.share-modal__url input {
  border: none; background: transparent; padding: 6px 10px;
  font-size: 13px; color: var(--text-primary);
  width: 100%;
}
.share-modal__url input:focus { box-shadow: none; outline: none; }

.share-modal__buttons {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.share-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: #fff !important;
  text-decoration: none;
  transition: transform .15s;
}
.share-btn:hover { transform: translateY(-2px); text-decoration: none; }
.share-btn--wa { background: linear-gradient(135deg, #25d366, #128c7e); }
.share-btn--fb { background: #1877f2; }
.share-btn--tg { background: #229ed9; }
.share-btn--tw { background: #000; }

.share-modal__qr {
  display: flex; justify-content: center; padding: 16px 0;
  background: var(--bg-secondary); border-radius: var(--radius-md);
}
.share-modal__qr img { width: 180px; height: 180px; }

@media (max-width: 480px) {
  .share-modal__card { padding: 24px 20px; }
  .share-modal__buttons { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   LZ — LANDING COMPETITIVA TOP (v2)
   ===================================================================== */
.lz {
  --accent: #2563eb;
  background: #fff;
  color: #0f172a;
  min-height: 100vh;
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  padding-bottom: 80px;
}

/* Landing promo strip — contained, rounded, with edge fade */
.lz-promo {
  display: block !important;
  background: #0f172a;
  color: #fff;
  padding: 10px 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  min-height: 38px;
  max-width: 1100px;
  margin: 16px auto;
  border-radius: 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

@media (max-width: 1140px) {
  .lz-promo { margin: 12px 16px; border-radius: 10px; }
}
.lz-promo__track {
  display: inline-flex;
  width: max-content;
  animation: promo-slide 30s linear infinite;
  will-change: transform;
}
.lz-promo__track:hover { animation-play-state: paused; }
.lz-promo__chunk { display: inline-block; }

/* Storefront promo bar — full width */
.store-page .promo-bar {
  display: block !important;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  padding: 10px 0;
  min-height: 40px;
  line-height: 1.2;
  max-width: none;
  margin: 0;
  border-radius: 0;
  background: var(--accent);
}

@media (max-width: 1240px) {
  .store-page .promo-bar { margin: 0; border-radius: 0; }
}
.store-page .promo-bar__track {
  display: inline-flex;
  width: max-content;
  animation: promo-slide 120s linear infinite;
  will-change: transform;
}
.store-page .promo-bar__track:hover { animation-play-state: paused; }
.store-page .promo-bar__chunk {
  display: inline-block;
  padding-right: 0;
}
@keyframes promo-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Sticky header */
.lz-bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 24px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid #e2e8f0;
}
.lz-bar__brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: #0f172a; font-weight: 800; text-decoration: none; font-size: 15px;
}
.lz-bar__brand img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.lz-bar__cta {
  background: linear-gradient(135deg, #25d366, #128c7e); color: #fff;
  padding: 10px 18px; border-radius: 999px;
  font-weight: 800; font-size: 13px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 6px 18px rgba(37,211,102,0.35);
  animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%,100% { box-shadow: 0 6px 18px rgba(37,211,102,0.35), 0 0 0 0 rgba(37,211,102,0.6); }
  50% { box-shadow: 0 6px 18px rgba(37,211,102,0.35), 0 0 0 12px rgba(37,211,102,0); }
}

/* Hero */
.lz-hero { padding: 40px 24px 20px; max-width: 1200px; margin: 0 auto; }
.lz-hero__grid {
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.lz-hero__left {
  display: flex; flex-direction: column; gap: 12px;
  position: sticky; top: 80px;
}
.lz-hero__media {
  position: relative; border-radius: 20px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
  aspect-ratio: 1/1; background: #f1f5f9;
  width: 100%;
}
.lz-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lz-discount {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: #ef4444; color: #fff;
  padding: 8px 14px; border-radius: 999px;
  font-size: 18px; font-weight: 800;
  box-shadow: 0 6px 16px rgba(239,68,68,0.40);
  animation: bounce-soft 1.5s ease-in-out infinite;
}
@keyframes bounce-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.lz-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.95); color: #0f172a; border: none;
  font-size: 22px; cursor: pointer; z-index: 2;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.lz-nav:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.lz-nav--prev { left: 12px; }
.lz-nav--next { right: 12px; }

.lz-thumbs {
  display: flex; gap: 8px; overflow-x: auto;
  padding-bottom: 4px;
}
.lz-thumb {
  flex-shrink: 0; width: 72px; height: 72px; padding: 0;
  border: 3px solid transparent; border-radius: 10px; overflow: hidden;
  background: #f1f5f9; cursor: pointer;
}
.lz-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lz-thumb.is-active { border-color: var(--accent); }

/* Hero info */
.lz-hero__info { display: flex; flex-direction: column; gap: 14px; }

.lz-rating-snap {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff7ed; border: 1px solid #fed7aa; padding: 6px 14px;
  border-radius: 999px; font-size: 13px;
  align-self: flex-start;
}
.lz-rating-snap strong { color: #9a3412; }
.lz-rating-snap small { color: #64748b; }

.lz-cat { color: #94a3b8; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; }
.lz-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin: 0;
}
.lz-desc { color: #475569; font-size: 16px; line-height: 1.55; margin: 0; }

.lz-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0; }
.lz-price strong { color: var(--accent); font-size: clamp(32px, 4vw, 44px); font-weight: 800; }
.lz-price__old { color: #94a3b8; text-decoration: line-through; font-size: 20px; }
.lz-price__save {
  background: #d1fae5; color: #047857;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 800;
  animation: wiggle 2s ease-in-out infinite;
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-2deg); }
  75% { transform: rotate(2deg); }
}

/* Social proof pulse */
.lz-social-proof {
  display: inline-flex; align-items: center; gap: 10px;
  background: #f0fdf4; border: 1px solid #bbf7d0;
  padding: 10px 16px; border-radius: 10px;
  color: #065f46; font-size: 13px;
}
.lz-dot {
  width: 10px; height: 10px; border-radius: 50%; background: #10b981;
  animation: pulse-dot 1.5s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.6); }
  50% { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
}

/* Stock alert */
.lz-stock-alert {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #f59e0b; color: #78350f;
  padding: 12px 16px; border-radius: 12px; font-size: 14px;
}
.lz-stock-bar {
  background: rgba(245,158,11,0.2); height: 6px; border-radius: 999px;
  margin-top: 6px; overflow: hidden;
}
.lz-stock-bar span { display: block; height: 100%; background: #f59e0b; border-radius: 999px; }

/* Countdown */
.lz-countdown {
  background: #0f172a; color: #fff;
  padding: 16px 20px; border-radius: 14px; text-align: center;
}
.lz-countdown__label {
  display: block; font-size: 12px; font-weight: 700;
  margin-bottom: 10px; color: #fbbf24; letter-spacing: 0.06em;
}
.lz-countdown__clock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lz-countdown__clock > div { background: rgba(255,255,255,0.08); border-radius: 8px; padding: 10px 4px; }
.lz-countdown__clock strong { display: block; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lz-countdown__clock small { color: #94a3b8; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; }

/* Benefits */
.lz-benefits { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 6px; }
.lz-benefits li {
  color: #0f172a; font-size: 14px; font-weight: 500;
  background: #f0fdf4; padding: 10px 14px; border-radius: 10px;
  display: flex; align-items: center; gap: 10px;
  border: 1px solid #bbf7d0;
}
.lz-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: #10b981; color: #fff; font-size: 12px; font-weight: 800;
  flex-shrink: 0;
}

/* CTA */
.lz-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff !important; text-decoration: none;
  padding: 18px 28px; border-radius: 999px;
  font-size: 15px; font-weight: 800; letter-spacing: 0.04em;
  box-shadow: 0 12px 32px rgba(37,211,102,0.45);
  transition: transform .15s;
  width: 100%;
  border: none; cursor: pointer;
}
.lz-cta:hover { transform: translateY(-3px); text-decoration: none; }
.lz-cta--big { padding: 22px 32px; font-size: 16px; }
.lz-trust-line { text-align: center; color: #64748b; font-size: 12px; margin: 0; }

/* Trust bar */
.lz-trustbar {
  max-width: 1200px; margin: 40px auto 0; padding: 28px 24px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  background: #f8fafc; border-radius: 20px; border: 1px solid #e2e8f0;
}
.lz-trustbar__item {
  display: flex; align-items: center; gap: 12px;
  color: var(--accent);
}
.lz-trustbar__item div { color: #0f172a; }
.lz-trustbar__item strong { display: block; font-size: 14px; font-weight: 700; }
.lz-trustbar__item small { color: #64748b; font-size: 12px; }

/* Why (benefits grid) */
.lz-why { max-width: 1100px; margin: 60px auto; padding: 0 24px; }
.lz-why h2 { font-size: 32px; text-align: center; margin: 0 0 6px; font-weight: 800; letter-spacing: -0.02em; }
.lz-why__sub { color: #64748b; text-align: center; margin: 0 0 28px; font-size: 15px; }
.lz-why__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.lz-why__card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
  padding: 22px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: transform .2s, box-shadow .2s;
}
.lz-why__card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,0.08); }
.lz-why__icon { display: block; font-size: 32px; margin-bottom: 10px; }
.lz-why__card p { margin: 0; color: #334155; font-size: 14px; line-height: 1.5; font-weight: 500; }

/* Comparison table */
.lz-compare {
  max-width: 1000px; margin: 60px auto; padding: 0 24px;
}
.lz-compare h2 { text-align: center; font-size: 32px; margin: 0 0 28px; font-weight: 800; letter-spacing: -0.02em; }
.lz-compare__table {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.lz-compare__col {
  background: #fff; border-radius: 16px; overflow: hidden;
  border: 2px solid #e2e8f0;
}
.lz-compare__col--us {
  border-color: var(--accent);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 15%, transparent);
  transform: scale(1.02);
}
.lz-compare__head {
  padding: 16px; text-align: center;
  font-weight: 800; font-size: 16px;
  background: #f8fafc;
}
.lz-compare__col--us .lz-compare__head {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
  color: #fff;
}
.lz-compare__col ul { padding: 20px 24px; margin: 0; list-style: none; display: grid; gap: 10px; }
.lz-compare__col li { font-size: 14px; color: #334155; }

/* Guarantee */
.lz-guarantee {
  max-width: 900px; margin: 40px auto; padding: 0 24px;
  display: flex; align-items: center; gap: 24px;
}
.lz-guarantee__shield {
  flex-shrink: 0; width: 100px; height: 100px; border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #047857);
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(16,185,129,0.35);
  animation: bounce-soft 2s ease-in-out infinite;
}
.lz-guarantee__text strong { display: block; font-size: 20px; color: #065f46; margin-bottom: 4px; }
.lz-guarantee__text p { margin: 0; color: #334155; font-size: 15px; line-height: 1.5; }

/* Reviews */
.lz-reviews { max-width: 1200px; margin: 60px auto; padding: 0 24px; }
.lz-reviews__head { text-align: center; margin-bottom: 32px; }
.lz-reviews__head h2 { font-size: 32px; margin: 0 0 12px; font-weight: 800; letter-spacing: -0.02em; }
.lz-rating-big { display: inline-flex; align-items: center; gap: 12px; }
.lz-rating-big .landing-stars { font-size: 24px; }
.lz-rating-big strong { color: #9a3412; font-size: 20px; }
.lz-verified-badge {
  background: #d1fae5; color: #047857;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
}
.lz-reviews__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.lz-review {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
  padding: 22px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.lz-review__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.lz-review__head .landing-stars { margin-left: auto; }
.lz-review__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #6366f1);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px;
}
.lz-review__head strong { display: block; color: #0f172a; font-size: 14px; }
.lz-review__head small { color: #10b981; font-size: 12px; font-weight: 600; }
.lz-review__text { margin: 0 0 10px; color: #334155; font-size: 14px; line-height: 1.55; font-style: italic; }
.lz-review__helpful { display: flex; gap: 12px; color: #94a3b8; font-size: 12px; }

/* Video */
.lz-video { max-width: 900px; margin: 60px auto; padding: 0 24px; text-align: center; }
.lz-video h2 { font-size: 32px; margin: 0 0 6px; font-weight: 800; letter-spacing: -0.02em; }
.lz-video__sub { color: #64748b; margin: 0 0 20px; }
.lz-video__wrap { aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,0.12); }
.lz-video__wrap iframe { width: 100%; height: 100%; border: none; }

/* FAQ */
.lz-faq { max-width: 800px; margin: 60px auto; padding: 0 24px; }
.lz-faq h2 { text-align: center; font-size: 32px; margin: 0 0 6px; font-weight: 800; letter-spacing: -0.02em; }
.lz-faq__sub { color: #64748b; text-align: center; margin: 0 0 24px; }
.lz-faq__list { display: grid; gap: 10px; }
.lz-faq__item { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.lz-faq__item[open] { border-color: var(--accent); }
.lz-faq__item summary {
  padding: 18px 22px; cursor: pointer; font-weight: 700; color: #0f172a;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  list-style: none;
}
.lz-faq__item summary::-webkit-details-marker { display: none; }
.lz-faq__item summary svg { transition: transform .25s; color: var(--accent); }
.lz-faq__item[open] summary svg { transform: rotate(180deg); }
.lz-faq__item p { padding: 0 22px 18px; margin: 0; color: #475569; line-height: 1.6; font-size: 14px; }

/* Final mega CTA */
.lz-final {
  margin: 60px 0 0; padding: 64px 24px;
  background: linear-gradient(135deg, #f0f4ff, #ecfdf5);
  text-align: center;
}
.lz-final__inner { max-width: 640px; margin: 0 auto; }
.lz-final h2 { font-size: 36px; margin: 0 0 8px; font-weight: 800; letter-spacing: -0.02em; }
.lz-final p { color: #334155; font-size: 17px; margin: 0 0 24px; }
.lz-final__features {
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
  margin: 20px 0;
}
.lz-final__features div {
  background: #fff; padding: 10px 16px; border-radius: 999px;
  border: 1px solid #e2e8f0; font-size: 13px; font-weight: 600; color: #334155;
}
.lz-final__price { display: flex; justify-content: center; align-items: baseline; gap: 12px; margin: 20px 0; flex-wrap: wrap; }
.lz-final__price strong { font-size: 48px; color: var(--accent); font-weight: 800; }
.lz-final__old { text-decoration: line-through; color: #94a3b8; font-size: 20px; }
.lz-final__discount {
  background: #ef4444; color: #fff;
  padding: 6px 12px; border-radius: 999px;
  font-size: 14px; font-weight: 800;
}

/* Footer */
.lz-footer {
  text-align: center; padding: 32px 24px;
  border-top: 1px solid #e2e8f0;
  color: #94a3b8; font-size: 13px;
  background: #f8fafc;
}
.lz-footer a { color: var(--accent); font-weight: 600; }
.lz-footer__small { margin-top: 8px; font-size: 11px; color: #cbd5e1; }

/* Sticky mobile CTA */
.lz-sticky-mobile {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #fff; border-top: 1px solid #e2e8f0;
  padding: 10px 16px;
  display: none; justify-content: space-between; align-items: center; gap: 12px;
  z-index: 90;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
}
.lz-sticky-mobile__price strong { display: block; color: var(--accent); font-size: 20px; font-weight: 800; }
.lz-sticky-mobile__price small { color: #94a3b8; text-decoration: line-through; font-size: 13px; }
.lz-sticky-mobile__btn {
  background: linear-gradient(135deg, #25d366, #128c7e); color: #fff;
  padding: 12px 24px; border-radius: 999px;
  font-weight: 800; font-size: 14px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 6px 16px rgba(37,211,102,0.35);
  flex: 1; justify-content: center;
}

/* FAB */
.lz-fab {
  position: fixed; bottom: 86px; right: 20px; z-index: 100;
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, #25d366, #128c7e); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(37,211,102,0.50);
  text-decoration: none;
  animation: pulse-glow 2.5s infinite;
}

/* Exit popup */
.lz-exit { border: none; padding: 0; background: transparent; max-width: 92vw; }
.lz-exit::backdrop { background: rgba(15,23,42,0.8); backdrop-filter: blur(8px); }
.lz-exit__card {
  background: #fff; border-radius: 20px; padding: 40px 32px 28px;
  width: min(440px, 92vw); text-align: center; position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,0.3);
}
.lz-exit__close {
  position: absolute; top: 14px; right: 14px;
  background: #f1f5f9; color: #475569; border: none;
  width: 32px; height: 32px; border-radius: 50%; font-size: 22px; cursor: pointer;
}
.lz-exit__badge {
  display: inline-block; background: #ef4444; color: #fff;
  padding: 6px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em; margin-bottom: 12px;
}
.lz-exit__card h2 { margin: 0 0 8px; font-size: 26px; font-weight: 800; }
.lz-exit__card p { margin: 0 0 20px; color: #475569; font-size: 15px; }
.lz-exit__card code {
  background: #fef3c7; color: #78350f;
  padding: 3px 8px; border-radius: 6px;
  font-weight: 800;
}
.lz-exit__skip {
  background: transparent; border: none; color: #94a3b8;
  font-size: 13px; margin-top: 12px; cursor: pointer;
  padding: 8px 16px;
}

/* Responsive */
@media (max-width: 900px) {
  .lz-hero { padding: 24px 16px 16px; }
  .lz-hero__grid { grid-template-columns: 1fr; gap: 24px; }
  .lz-hero__left { position: static; }
  .lz-trustbar { grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 20px 16px; margin-top: 24px; }
  .lz-compare__table { grid-template-columns: 1fr; }
  .lz-compare__col--us { transform: none; }
  .lz-guarantee { flex-direction: column; text-align: center; }
  .lz-sticky-mobile { display: flex; }
  .lz-fab { bottom: 86px; }
  .lz-bar__brand span { display: none; }
  .lz-promo { font-size: 10px; }
}
@media (max-width: 480px) {
  .lz-hero { padding: 24px 16px 10px; }
  .lz-why h2, .lz-compare h2, .lz-reviews__head h2, .lz-faq h2 { font-size: 24px; }
  .lz-final h2 { font-size: 28px; }
  .lz-final__price strong { font-size: 36px; }
  .lz-trustbar__item strong { font-size: 13px; }
  .lz-trustbar__item small { font-size: 11px; }
}

/* Payment methods stats (dashboard dedicated page) */
.pm-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 24px;
}
.pm-stats__card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.pm-stats__card--accent {
  background: linear-gradient(135deg, #eff6ff, #ecfdf5);
  border-color: #bfdbfe;
}
.pm-stats__num {
  display: block;
  font-size: 36px; font-weight: 800;
  background: linear-gradient(135deg, #2563eb, #10b981);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.pm-stats__label {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}
@media (max-width: 640px) {
  .pm-stats { grid-template-columns: 1fr; }
}

/* =====================================================================
   Payment methods configuration (dashboard)
   ===================================================================== */
.pm-config { display: grid; gap: 10px; }
.pm-method {
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .15s;
}
.pm-method[open] { border-color: var(--color-primary); }
.pm-method summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
}
.pm-method summary::-webkit-details-marker { display: none; }
.pm-method summary strong { font-size: 14px; color: var(--text-primary); }
.pm-method summary em { color: var(--text-muted); font-size: 12px; font-style: normal; flex: 1; }
.pm-method__toggle { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; cursor: pointer; }
.pm-method__toggle input { opacity: 0; position: absolute; inset: 0; }
.pm-method__toggle span {
  position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px;
  transition: background .2s;
}
.pm-method__toggle span::before {
  content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px;
  background: #fff; border-radius: 50%; transition: transform .2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.pm-method__toggle input:checked + span { background: var(--color-secondary); }
.pm-method__toggle input:checked + span::before { transform: translateX(18px); }
.pm-method__fields {
  padding: 0 18px 18px;
  border-top: 1px solid var(--border-color);
  margin-top: -1px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.pm-method__fields label { font-size: 13px; gap: 4px; }
.pm-method__fields input, .pm-method__fields select { font-size: 14px; padding: 9px 12px; }
@media (max-width: 640px) { .pm-method__fields { grid-template-columns: 1fr; } }

/* =====================================================================
   Custom payment methods & extra charges (dashboard admin)
   ===================================================================== */
.custom-pm-list, .extras-list { display: grid; gap: 10px; margin-bottom: 12px; }

.custom-pm-row {
  display: grid;
  grid-template-columns: 60px 1fr 1.2fr 1.5fr 40px;
  gap: 8px;
  align-items: center;
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px;
}
.custom-pm-row input {
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  width: 100%;
}
.custom-pm-icon { text-align: center; font-size: 18px !important; }

.extra-row {
  display: grid;
  grid-template-columns: 60px 1fr 120px 140px auto 40px;
  gap: 8px;
  align-items: center;
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px;
}
.extra-row input, .extra-row select {
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  width: 100%;
}
.extra-icon { text-align: center; font-size: 18px !important; }
.extra-optional {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
}
.extra-optional input { width: auto !important; margin: 0; }

.custom-pm-del {
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  border-radius: 6px;
  width: 36px; height: 36px;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.custom-pm-del:hover { background: #fecaca; transform: scale(1.05); }

@media (max-width: 720px) {
  .custom-pm-row { grid-template-columns: 50px 1fr 40px; }
  .custom-pm-row .custom-pm-desc,
  .custom-pm-row .custom-pm-ins { grid-column: 1 / -1; }
  .extra-row { grid-template-columns: 50px 1fr 40px; }
  .extra-row .extra-amount,
  .extra-row .extra-type,
  .extra-row .extra-optional { grid-column: 1 / -1; }
}

/* =====================================================================
   Payment method selector (cart drawer)
   ===================================================================== */
.pm-select { display: grid; gap: 8px; margin-bottom: 16px; }
.pm-option {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: #e2e8f0;
  cursor: pointer; width: 100%;
  font-family: inherit;
  text-align: left;
  transition: all .15s;
}
.pm-option:hover { background: rgba(255,255,255,0.08); }
.pm-option.is-active {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-color: var(--accent);
}
.pm-option__icon { font-size: 24px; flex-shrink: 0; }
.pm-option__info { flex: 1; }
.pm-option__info strong { display: block; color: #fff; font-size: 14px; font-weight: 700; }
.pm-option__info small { color: #94a3b8; font-size: 12px; }
.pm-option__check {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent; font-weight: 800; flex-shrink: 0;
}
.pm-option.is-active .pm-option__check {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* Payment method details */
.pm-detail { margin-top: 16px; }
.pm-info { display: grid; gap: 8px; }
.pm-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.pm-row__label { font-size: 12px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.pm-row__value { display: inline-flex; align-items: center; gap: 8px; }
.pm-row__value code { color: #fff; font-size: 14px; font-weight: 600; background: none; padding: 0; }
.pm-copy-btn {
  background: var(--accent); color: #fff;
  border: none; padding: 6px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 700; cursor: pointer;
  letter-spacing: 0.04em;
}
.pm-copy-btn:hover { opacity: 0.9; transform: scale(1.05); }

/* Cash change display */
.cash-change {
  margin-top: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px 16px;
  animation: fadeUp .25s ease both;
}
.cash-change[hidden] { display: none !important; }
.cash-change__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0;
  color: #cbd5e1;
  font-size: 14px;
}
.cash-change__row--change {
  border-top: 1px dashed rgba(255,255,255,0.1);
  padding-top: 10px;
  margin-top: 4px;
}
.cash-change__row--change span { color: #fff; font-weight: 700; }
.cash-change__row strong {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.cash-change__hint {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* 3-step transfer guide */
.pm-steps { display: grid; gap: 12px; }
.pm-step {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
.pm-step__num {
  flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
}
.pm-step strong { display: block; color: #fff; font-size: 14px; margin-bottom: 4px; }
.pm-step small { color: #94a3b8; font-size: 12px; }
.pm-step .pm-info { margin-top: 8px; }

/* Back button in cart footer */
.btn-cart-back {
  display: block;
  width: 100%; margin-top: 8px;
  background: transparent; color: #94a3b8;
  border: none; font-size: 13px; cursor: pointer;
  padding: 8px;
}
.btn-cart-back:hover { color: #fff; }
.btn-cart-back[hidden] { display: none !important; }

/* Cart step visibility (fixes hidden attribute override by flex/grid) */
[data-step][hidden] { display: none !important; }
.pm-detail[hidden] { display: none !important; }
.celebrate[hidden] { display: none !important; }

/* =====================================================================
   🎉 Celebration overlay (on order complete)
   ===================================================================== */
.celebrate {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
}
.celebrate[hidden] { display: none !important; }
.celebrate__confetti {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.celebrate__confetti span {
  position: absolute; top: -20px;
  width: 12px; height: 12px; border-radius: 2px;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0.6; }
}
.celebrate__card {
  background: #fff;
  border-radius: 20px;
  padding: 40px 32px;
  text-align: center;
  max-width: 360px;
  position: relative;
  animation: celebrate-pop .45s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 30px 80px rgba(0,0,0,0.3);
}
@keyframes celebrate-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
.celebrate__emoji { font-size: 64px; margin-bottom: 12px; animation: celebrate-bounce 0.8s ease-in-out infinite; }
@keyframes celebrate-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-10px) scale(1.1); }
}
.celebrate__card h2 {
  margin: 0 0 8px;
  font-size: 24px; font-weight: 800;
  background: linear-gradient(90deg, #10b981, #06b6d4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.celebrate__card p { margin: 0 0 16px; color: #64748b; font-size: 14px; }
.celebrate__spinner {
  width: 28px; height: 28px; margin: 0 auto;
  border: 3px solid #e2e8f0; border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Copy tooltip */
.copy-tip {
  position: fixed;
  bottom: 100px; left: 50%; transform: translateX(-50%);
  background: #10b981; color: #fff;
  padding: 10px 20px; border-radius: 999px;
  font-weight: 700; font-size: 13px;
  z-index: 10000;
  box-shadow: 0 8px 20px rgba(16,185,129,0.4);
  animation: fadeUp .25s ease;
}

/* =====================================================================
   UNIFIED MODAL SYSTEM
   Base styles shared by .cfm, .share-modal, .bgrm-modal
   (each of them already has `<dialog>` element)
   ===================================================================== */
.cfm, .share-modal, .bgrm-modal {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  max-width: 96vw !important;
  max-height: 92vh !important;
  border-radius: 24px;
  overflow: visible;
}
.cfm::backdrop,
.share-modal::backdrop,
.bgrm-modal::backdrop {
  background: rgba(10,14,30,0.55) !important;
  backdrop-filter: blur(10px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
  animation: modalBackdropIn .25s ease;
}
@keyframes modalBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.cfm[open], .share-modal[open], .bgrm-modal[open] {
  animation: modalIn .28s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalIn {
  0%   { opacity: 0; transform: scale(0.9) translateY(20px); }
  100% { opacity: 1; transform: none; }
}

/* =====================================================================
   Custom confirm modal (replaces native confirm())
   ===================================================================== */
.cfm__card {
  background: #fff; border-radius: 24px;
  padding: 36px 32px 28px;
  width: min(440px, 92vw);
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1);
  position: relative;
}
@keyframes cfmIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.cfm__icon {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #b45309;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
}
.cfm__title { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: #0f172a; }
.cfm__msg {
  margin: 0 0 24px;
  color: #475569;
  font-size: 14px;
  line-height: 1.5;
}
.cfm__input {
  width: 100%;
  padding: 12px 14px;
  margin: -8px 0 20px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  font-size: 16px; /* 16px evita zoom automático en iOS al enfocar */
  font-weight: 500;
  color: #0f172a;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.cfm__input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.cfm__input::placeholder { color: #94a3b8; }
.cfm--prompt .cfm__icon {
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  color: #4338ca;
}
.cfm__actions {
  display: flex; gap: 10px; justify-content: center;
}
.cfm__actions .btn { flex: 1; max-width: 160px; justify-content: center; }

/* Danger variant icon + button */
.cfm[data-variant="danger"] .cfm__icon,
.cfm .cfm__icon:where([data-variant="danger"]) {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #b91c1c;
}
.btn--danger {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fff;
  box-shadow: 0 6px 16px rgba(239,68,68,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
  border: none;
}
.btn--danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(239,68,68,0.45), inset 0 1px 0 rgba(255,255,255,0.15);
}

/* Danger icon auto-applies when modal title hints "Eliminar" */
.cfm .cfm__icon {
  transition: all .15s;
}

@media (max-width: 480px) {
  .cfm__card { padding: 24px 20px 18px; }
  .cfm__icon { width: 56px; height: 56px; font-size: 28px; }
  .cfm__title { font-size: 18px; }
  .cfm__actions { flex-direction: column; }
  .cfm__actions .btn { width: 100%; max-width: none; }
  /* Input del appPrompt — más alto en móvil para evitar zoom iOS (font-size >=16px) + tap area cómoda */
  .cfm__input { padding: 14px 16px; font-size: 16px; min-height: 48px; }
}

/* AI auto-fill status (under description textarea) */
.ai-autofill-status {
  display: block; margin-top: 6px;
  padding: 8px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 600;
  animation: fadeUp .2s ease both;
}
.ai-autofill-status--info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; animation: pulse-soft 1.2s ease-in-out infinite; }
.ai-autofill-status--success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.ai-autofill-status--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* AI content generator card */
.ai-gen-card {
  background: linear-gradient(135deg, #faf5ff, #fce7f3);
  border: 1.5px solid #e9d5ff;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ai-gen-card strong { display: block; font-size: 15px; color: #6b21a8; margin-bottom: 4px; }
.ai-gen-card p { margin: 0; font-size: 13px; max-width: 400px; }
.ai-gen-status {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px; font-weight: 600;
  margin-bottom: 14px;
  animation: fadeUp .2s ease both;
}
.ai-gen-status--info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; animation: pulse-soft 1.2s ease-in-out infinite; }
.ai-gen-status--success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.ai-gen-status--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* Collapsible landing advanced section */
.landing-advanced {
  background: #fff;
  border: 1.5px solid var(--border-color);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
}
.landing-advanced summary {
  cursor: pointer;
  padding: 16px 20px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background .15s;
}
.landing-advanced summary::-webkit-details-marker { display: none; }
.landing-advanced summary::before {
  content: '▶'; margin-right: 8px;
  transition: transform .2s;
  display: inline-block;
  color: var(--color-primary);
}
.landing-advanced[open] summary::before { transform: rotate(90deg); }
.landing-advanced summary:hover { background: var(--bg-secondary); }
.landing-advanced summary > span { font-weight: 700; color: var(--text-primary); font-size: 15px; }
.landing-advanced summary > em { font-style: normal; font-size: 12px; color: var(--text-muted); padding-left: 20px; }

.landing-advanced__body {
  padding: 18px 20px 22px;
  border-top: 1px solid var(--border-color);
  display: grid; gap: 14px;
  background: var(--bg-secondary);
}

/* Landing share card in product form */
.landing-share-card {
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
  border: 1px solid #a7f3d0;
  border-radius: 14px;
  padding: 18px 20px;
  display: grid; gap: 8px;
}
.landing-share-card strong { color: #047857; font-size: 14px; }
.landing-share-card p { margin: 0; font-size: 13px; }
.landing-share-card__url {
  background: #fff; padding: 8px 12px; border-radius: 8px;
  font-size: 13px; word-break: break-all; color: #1e293b;
  border: 1px solid #d1fae5;
}

/* Responsive */
@media (max-width: 880px) {
  .landing-hero { grid-template-columns: 1fr; gap: 24px; padding: 32px 16px; }
  .landing-bar { padding: 10px 16px; }
  .landing-bar__brand span { display: none; }
  .landing-fab { bottom: 16px; right: 16px; width: 56px; height: 56px; }
  .landing-cta-bottom { padding: 32px 20px; }
  .landing-cta-bottom h2 { font-size: 24px; }
}

/* ---------- Animations ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.flash, .trial-banner, .product-card, .store-card, .metric-card { animation: fadeUp .25s ease both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* =====================================================================
   📊 Embudo de conversión (dashboard)
   ===================================================================== */
.funnel-card { margin-top: 20px; }
.funnel-card__conv { font-size: 13px; color: #475569; }
.funnel-card__conv strong { color: #10b981; font-size: 16px; }
.funnel { display: grid; gap: 12px; margin-top: 16px; }
.funnel__row {
  display: grid;
  grid-template-columns: 200px 1fr 60px;
  gap: 14px;
  align-items: center;
  font-size: 13px;
}
.funnel__label { color: #475569; font-weight: 600; }
.funnel__bar-wrap {
  background: #f1f5f9;
  border-radius: 10px;
  height: 32px;
  overflow: hidden;
  position: relative;
}
.funnel__bar {
  height: 100%;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 14px;
  color: #fff; font-weight: 700;
  transition: width .8s cubic-bezier(.34,1.56,.64,1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  min-width: 40px;
}
.funnel__bar span { white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.funnel__pct { text-align: right; font-weight: 700; color: #0f172a; }
@media (max-width: 700px) {
  .funnel__row { grid-template-columns: 1fr; gap: 4px; }
  .funnel__label { font-size: 12px; }
  .funnel__bar-wrap { height: 28px; }
}

/* =====================================================================
   💀 Skeleton loaders (product cards, cart items)
   ===================================================================== */
.skeleton {
  background:
    linear-gradient(90deg,
      rgba(148,163,184,0.08) 0%,
      rgba(148,163,184,0.18) 50%,
      rgba(148,163,184,0.08) 100%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
@keyframes skelShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.product-card--skeleton .product-card__media { height: 220px; }
.product-card--skeleton .product-card__body { padding: 14px; }
.product-card--skeleton .skel-line { height: 14px; margin-bottom: 8px; }
.product-card--skeleton .skel-line--short { width: 60%; }

/* =====================================================================
   ⭐ Wishlist — Heart button on product cards + floating counter
   ===================================================================== */
.product-card__wish {
  position: absolute;
  top: 10px; right: 10px;
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.9);
  border: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #94a3b8;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: all .2s;
  z-index: 3;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.product-card__wish:hover { transform: scale(1.12); color: #ef4444; }
.product-card__wish.is-active {
  color: #fff;
  background: linear-gradient(135deg,#ef4444,#ec4899);
  animation: heartPop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes heartPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.product-card__wish svg { width: 18px; height: 18px; }

/* Bottom-nav wishlist badge — sits on top-right of the heart icon */
.bottom-nav__item [data-wish-badge] {
  position: absolute;
  top: 0;
  left: calc(50% + 4px);   /* justo al borde derecho del ícono (22px/2 + pad) */
  min-width: 16px; height: 16px; padding: 0 4px;
  background: #ef4444;
  color: #fff;
  font-size: 10px; font-weight: 800;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(239,68,68,0.45);
  line-height: 1;
  z-index: 2;
}
.bottom-nav__item [data-wish-badge][hidden] { display: none !important; }

/* =====================================================================
   📱 PWA install button (floating)
   ===================================================================== */
.pwa-install {
  position: fixed;
  left: 20px; bottom: 90px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  background: #0f172a;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 10px 24px rgba(15,23,42,0.3);
  cursor: pointer;
  z-index: 140;
  animation: pwaFade .4s ease .5s both, tsFloat 3s ease-in-out 1s infinite;
}
@keyframes pwaFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pwa-install:hover { transform: scale(1.05); background: #1e293b; }
@media (min-width: 900px) { .pwa-install { bottom: 24px; } }

/* =====================================================================
   Fomo-style social-proof popup (rotating reviews, bottom-left)
   ===================================================================== */
.fomo-pop {
  position: fixed;
  left: 18px; bottom: 18px;
  z-index: 130;
  background: #131929;
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
  padding: 12px 44px 12px 14px;
  display: flex; align-items: center; gap: 12px;
  max-width: 320px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-16px);
  transition: opacity .6s ease, transform .6s ease;
}
.fomo-pop.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.fomo-pop__icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent,#2563eb) 20%, transparent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.fomo-pop__body { min-width: 0; flex: 1; }
.fomo-pop__stars {
  color: #f59e0b;
  font-size: 12px;
  letter-spacing: 1px;
  margin-bottom: 2px;
}
.fomo-pop__text {
  margin: 0 0 3px 0;
  font-size: 12px;
  line-height: 1.35;
  color: #cbd5e1;
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fomo-pop__who {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
}
.fomo-pop__close {
  position: absolute;
  top: 2px; right: 2px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: #94a3b8;
  font-size: 22px; line-height: 1;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  -webkit-tap-highlight-color: rgba(255,255,255,.15);
  touch-action: manipulation;
  z-index: 2;
}
.fomo-pop__close:hover,
.fomo-pop__close:active { color: #fff; background: rgba(255,255,255,.08); }

/* Cookie consent banner */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #1e293b; color: #e2e8f0;
  padding: 16px 24px;
  display: none; align-items: center; justify-content: center; gap: 16px;
  z-index: 9999;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
  font-size: 14px;
  animation: slideUp .3s ease;
}
.cookie-banner.show { display: flex; }
.cookie-banner a { color: #60a5fa; text-decoration: underline; }
.cookie-banner p { margin: 0; max-width: 600px; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (max-width: 600px) {
  .cookie-banner { flex-direction: column; text-align: center; padding: 16px; gap: 12px; }
}

@media (max-width: 520px) {
  .fomo-pop {
    left: 10px; bottom: 10px;
    right: auto;
    max-width: 260px;
    padding: 9px 28px 9px 10px;
    gap: 9px;
    border-radius: 12px;
  }
  .fomo-pop__icon {
    width: 30px; height: 30px;
    font-size: 15px;
  }
  .fomo-pop__stars { font-size: 10px; margin-bottom: 1px; }
  .fomo-pop__text  { font-size: 11px; line-height: 1.3; -webkit-line-clamp: 2; }
  .fomo-pop__who   { font-size: 10px; }
  .fomo-pop__close { width: 40px; height: 40px; font-size: 22px; top: 0; right: 0; }
}

/* =====================================================================
   📖 Flipbook / Revista digital — PROTECCIÓN ANTI-COPIA
   ===================================================================== */
.fb-wrap {
  --fb-accent: #2563eb;
  --fb-theme:  #2563eb;
  min-height: 100vh;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  color: #e2e8f0;
  display: flex; flex-direction: column;
  padding: 0 0 24px;
  /* Anti-selección de texto */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;   /* iOS Safari: no "save image" al mantener presionado */
  -webkit-tap-highlight-color: transparent;
}
/* Prevenir drag & drop de imágenes */
.fb-wrap img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  pointer-events: none;  /* No se pueden abrir/descargar al tocar */
}
/* Overlay transparente sobre imagen para bloquear long-press en móvil */
.fb-prod__imgwrap { position: relative; }
.fb-prod__shield {
  position: absolute; inset: 0;
  background: transparent;
  z-index: 2;
  pointer-events: auto;
}

/* Top bar */
.fb-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 20px;
  background: rgba(15,23,42,0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: sticky; top: 0; z-index: 50;
}
.fb-bar__back {
  display: inline-flex; align-items: center; gap: 8px;
  color: #cbd5e1; font-weight: 600; font-size: 14px;
  padding: 8px 14px 8px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.05);
  transition: background .2s;
}
.fb-bar__back:hover { background: rgba(255,255,255,0.1); color: #fff; }
.fb-bar__back span { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-bar__title {
  font-size: 15px; font-weight: 700; color: #fff; letter-spacing: 0.02em;
}
.fb-bar__actions { display: flex; align-items: center; gap: 8px; }
.fb-bar__btn {
  width: 38px; height: 38px; padding: 0; border: none;
  background: rgba(255,255,255,0.08); color: #e2e8f0;
  border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.fb-bar__btn:hover { background: var(--fb-accent); color: #fff; transform: translateY(-1px); }
.fb-bar__btn--share { background: rgba(37,211,102,0.2); color: #25d366; }
.fb-bar__btn--share:hover { background: #25d366; color: #fff; }
.fb-bar__btn--cart { position: relative; background: rgba(37,99,235,0.25); color: #60a5fa; }
.fb-bar__btn--cart:hover { background: #2563eb; color: #fff; }
.fb-bar__cart-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  background: #ef4444; color: #fff;
  border-radius: 9px; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #0f172a;
}
.fb-bar__pager {
  font-size: 13px; font-weight: 700; color: #94a3b8;
  padding: 0 10px; min-width: 64px; text-align: center;
}
.fb-bar__pager span { color: #fff; }

/* Stage (contains the book) */
.fb-stage {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  position: relative;
  min-height: calc(100vh - 120px);
}
.fb-book {
  max-width: 100%;
  margin: 0 auto;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 10px 30px rgba(0,0,0,0.3);
  border-radius: 4px;
}

/* Edge navigation */
.fb-edge {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff; border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fb-edge:hover {
  background: var(--fb-accent);
  transform: translateY(-50%) scale(1.1);
}
.fb-edge--left  { left: 16px; }
.fb-edge--right { right: 16px; }

/* Pages */
.fb-page {
  background: #fff;
  color: #0f172a;
  padding: 28px 24px;
  display: flex; flex-direction: column;
  overflow: hidden;
  font-family: inherit;
}

/* Cover */
.fb-page--cover {
  background: linear-gradient(135deg, var(--fb-accent), var(--fb-theme));
  color: #fff;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.fb-page--cover::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,0.2), transparent 60%);
  pointer-events: none;
}
.fb-cover {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 40px 28px;
  height: 100%;
}
.fb-cover__logo {
  width: 120px; height: 120px; border-radius: 28px;
  background: #fff; padding: 10px;
  object-fit: contain;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  margin-bottom: 24px;
}
.fb-cover__logo--empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 56px; font-weight: 800; color: var(--fb-accent);
}
.fb-cover__name {
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 900;
  margin: 0 0 8px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.2);
  line-height: 1.1;
}
.fb-cover__tagline {
  font-size: 15px; opacity: 0.9; margin: 0 0 24px;
}
.fb-cover__badge {
  display: inline-block;
  padding: 8px 18px; border-radius: 999px;
  background: rgba(255,255,255,0.25);
  font-size: 13px; font-weight: 700;
  backdrop-filter: blur(10px);
  margin-bottom: auto;
}
.fb-cover__hint {
  margin-top: auto;
  font-size: 12px; opacity: 0.7;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 16px;
  width: 100%;
}

/* Intro */
.fb-page--intro { background: #f8fafc; }
.fb-intro { flex: 1; display: flex; flex-direction: column; }
.fb-intro h2 {
  font-size: 24px; font-weight: 800; color: var(--fb-accent);
  margin: 0 0 12px; text-align: center;
}
.fb-intro__welcome {
  font-size: 13px; line-height: 1.65; color: #475569;
  margin-bottom: 20px; text-align: center;
}
.fb-intro h3 {
  font-size: 14px; font-weight: 800; color: #0f172a;
  margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.05em;
}
.fb-intro__cats { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.fb-intro__cats li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: #fff; border-radius: 10px;
  border: 1px solid #e2e8f0; font-size: 13px;
}
.fb-intro__cat-icon  { font-size: 18px; }
.fb-intro__cat-name  { flex: 1; font-weight: 600; color: #0f172a; }
.fb-intro__cat-count { color: #64748b; font-size: 11px; }
.fb-intro__pages {
  margin-top: auto; padding-top: 12px;
  text-align: center; font-size: 12px; color: #94a3b8;
  border-top: 1px dashed #cbd5e1;
}

/* Products pages */
.fb-page--products { padding: 18px 16px 10px; }
.fb-products__header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 2px solid var(--fb-accent);
}
.fb-products__icon { font-size: 22px; }
.fb-products__header h2 {
  margin: 0; font-size: 18px; font-weight: 800; color: var(--fb-accent);
}
.fb-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  flex: 1; align-content: start;
}
.fb-prod {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 10px; padding: 8px;
  display: flex; flex-direction: column; gap: 4px;
  transition: all .2s;
}
.fb-prod:hover { border-color: var(--fb-accent); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.fb-prod--placeholder { border: 1px dashed #e2e8f0; background: transparent; }
.fb-prod__imgwrap {
  aspect-ratio: 1; border-radius: 8px; overflow: hidden;
  background: #f1f5f9;
  display: flex; align-items: center; justify-content: center;
}
.fb-prod__imgwrap img {
  width: 100%; height: 100%; object-fit: cover;
}
.fb-prod__noimg { font-size: 32px; opacity: 0.5; }
.fb-prod__name {
  font-size: 11px; font-weight: 700; color: #0f172a;
  margin: 4px 0 0; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.fb-prod__price {
  margin: 0; font-size: 13px; font-weight: 800; color: var(--fb-accent);
}
.fb-prod__btn {
  display: inline-block; text-align: center;
  padding: 5px 8px; background: #25d366; color: #fff;
  border-radius: 6px; font-size: 10px; font-weight: 700;
  margin-top: 4px; transition: background .2s;
}
.fb-prod__btn:hover { background: #1ea952; }
.fb-page__foot {
  margin-top: 8px; padding-top: 6px;
  border-top: 1px dashed #cbd5e1;
  display: flex; justify-content: space-between;
  font-size: 9px; color: #94a3b8;
}

/* Contact page */
.fb-page--contact {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #fff;
  align-items: center; justify-content: center;
}
.fb-contact {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 28px; height: 100%;
}
.fb-contact__logo {
  width: 80px; height: 80px; border-radius: 20px;
  background: #fff; padding: 8px; object-fit: contain;
  margin-bottom: 18px;
}
.fb-contact h2 {
  font-size: 26px; font-weight: 800;
  margin: 0 0 10px;
  background: linear-gradient(135deg, #60a5fa, #34d399);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.fb-contact p { font-size: 14px; color: #cbd5e1; margin: 0 0 18px; line-height: 1.6; }
.fb-contact__wa {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 999px;
  background: #25d366; color: #fff;
  font-weight: 700; font-size: 15px;
  box-shadow: 0 8px 20px rgba(37,211,102,0.4);
  transition: transform .2s, box-shadow .2s;
  margin: 12px 0;
}
.fb-contact__wa:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(37,211,102,0.5); }
.fb-contact__links {
  margin: 16px 0 0; display: grid; gap: 8px; font-size: 13px;
}
.fb-contact__links a { color: #60a5fa; }
.fb-contact__links a:hover { text-decoration: underline; }
.fb-contact__powered {
  margin-top: auto; padding-top: 18px;
  font-size: 11px; color: #64748b;
  border-top: 1px solid rgba(255,255,255,0.08);
  width: 100%;
}
.fb-contact__powered a { color: #94a3b8; font-weight: 700; }

/* Blank filler page */
.fb-page--blank { background: #f8fafc; }

/* Hint below book */
.fb-hint {
  text-align: center; font-size: 12px; color: #64748b;
  margin: 16px 0 0;
}
.fb-hint span { margin-right: 4px; }

/* Mobile tweaks */
@media (max-width: 760px) {
  .fb-bar { padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
  .fb-bar__title { display: none; }
  .fb-bar__back span { max-width: 100px; font-size: 13px; }
  .fb-bar__btn { width: 34px; height: 34px; }
  .fb-edge { display: none; }
  .fb-stage { padding: 16px 8px; min-height: calc(100vh - 140px); }
  .fb-cover__name { font-size: 24px; }
  .fb-cover__logo { width: 80px; height: 80px; margin-bottom: 16px; }
  .fb-products__header h2 { font-size: 15px; }
  .fb-prod__name { font-size: 10px; }
  .fb-prod__price { font-size: 11px; }
  .fb-prod__btn { font-size: 9px; padding: 4px 6px; }
  .fb-contact h2 { font-size: 20px; }
  .fb-contact p { font-size: 12px; }
}

/* 🔒 Print block — la revista es DIGITAL, no imprimible */
@media print {
  body * { visibility: hidden !important; }
  body::before {
    content: "🔒 Impresión deshabilitada\A\A Esta revista digital está protegida y no puede imprimirse.\A Para ver el catálogo, regresa al navegador web.";
    white-space: pre-wrap;
    visibility: visible !important;
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700;
    color: #0f172a; background: #fff;
    padding: 40px; text-align: center;
  }
}

/* Overlay visible cuando se imprime (backup) */
.fb-print-block {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.98);
  z-index: 9999;
  align-items: center; justify-content: center;
  color: #fff; text-align: center; padding: 40px;
}
.is-printing .fb-print-block { display: flex; }
.fb-print-block h2 { font-size: 28px; font-weight: 800; margin: 0 0 12px; }
.fb-print-block p  { font-size: 16px; color: #cbd5e1; margin: 0; }

/* 🔒 Ocultar contenido cuando DevTools está abierto */
body.devtools-open .fb-stage {
  filter: blur(14px);
  pointer-events: none;
}
body.devtools-open .fb-stage::after {
  content: "🔒 Contenido protegido. Cierra las herramientas de desarrollador para continuar.";
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: #fff;
  background: rgba(15,23,42,0.92);
  z-index: 9999; padding: 40px; text-align: center;
  filter: none;
}

/* Floating cart FAB button */
.fb-fab-cart {
  position: fixed; bottom: 24px; right: 24px; z-index: 48;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 20px 14px 18px;
  background: var(--fb-accent);
  color: #fff; border: none; border-radius: 999px;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(37,99,235,0.4), 0 0 0 1px rgba(255,255,255,0.1);
  transition: transform .2s, box-shadow .2s;
}
.fb-fab-cart:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(37,99,235,0.55); }
.fb-fab-cart__count {
  position: absolute; top: -6px; right: -6px;
  min-width: 22px; height: 22px; padding: 0 6px;
  background: #ef4444; color: #fff;
  border-radius: 11px; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #0f172a;
}
@media (max-width: 600px) {
  .fb-fab-cart { bottom: 16px; right: 16px; padding: 12px 16px 12px 14px; font-size: 13px; }
  .fb-fab-cart__label { display: none; }
}

/* Sold out overlay on flipbook product */
.fb-prod__sold-out {
  position: absolute; inset: 0;
  background: rgba(15,23,42,0.75);
  color: #fff; font-weight: 800; font-size: 13px; letter-spacing: 0.1em;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; z-index: 3;
}
.fb-prod.is-out .fb-prod__btn { background: #94a3b8; cursor: not-allowed; opacity: 0.7; }
.fb-prod.is-out .fb-prod__btn:hover { background: #94a3b8; }

/* Disabled button state */
.fb-prod__btn:disabled { background: #94a3b8 !important; cursor: not-allowed; opacity: 0.7; }
.fb-prod__btn:disabled:hover { background: #94a3b8 !important; }

/* Aviso de protección — chip en la esquina inferior izquierda */
.fb-protected {
  position: fixed; bottom: 24px; left: 24px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 10px;
  background: rgba(15,23,42,0.85);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  font-size: 11px; color: #cbd5e1;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 49;
}
.fb-protected svg { color: #10b981; }
@media (max-width: 600px) {
  .fb-protected { bottom: 8px; left: 8px; font-size: 10px; padding: 4px 10px 4px 8px; }
}

/* =====================================================================
   📖 Flipbook upgrade page (Starter plan)
   ===================================================================== */
.fb-upgrade {
  min-height: 100vh;
  background: var(--bg-gradient-soft);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.fb-upgrade__card {
  max-width: 520px; width: 100%;
  background: #fff; border-radius: 24px;
  padding: 48px 36px;
  text-align: center;
  box-shadow: var(--shadow-xl);
}
.fb-upgrade__icon {
  font-size: 64px; margin-bottom: 16px;
  display: inline-block;
  animation: fbPulse 2s ease infinite;
}
@keyframes fbPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.fb-upgrade h1 {
  font-size: 26px; font-weight: 800;
  margin: 0 0 12px; color: var(--text-primary);
}
.fb-upgrade p { color: var(--text-secondary); font-size: 15px; line-height: 1.6; margin: 0 0 12px; }
.fb-upgrade__sub { font-size: 14px; color: var(--text-muted); }
.fb-upgrade__actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin: 28px 0 0;
}
.fb-upgrade__powered {
  margin-top: 32px; padding-top: 18px;
  border-top: 1px solid var(--border-color);
  color: var(--text-muted); font-size: 12px;
}
.fb-upgrade__powered a { color: var(--color-primary); font-weight: 700; }

/* =====================================================================
   🎁 Referrals — Inactive subscription banner
   ===================================================================== */
.ref-inactive-banner {
  display: flex; align-items: flex-start; gap: 16px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1.5px solid #f59e0b;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(245,158,11,0.15);
}
.ref-inactive-banner__icon {
  font-size: 32px;
  flex-shrink: 0;
  line-height: 1;
}
.ref-inactive-banner__text { flex: 1; min-width: 0; }
.ref-inactive-banner__text strong {
  display: block;
  font-size: 15px; font-weight: 800;
  color: #92400e;
  margin-bottom: 4px;
}
.ref-inactive-banner__text p {
  margin: 0;
  color: #78350f;
  font-size: 13px; line-height: 1.5;
}
.ref-inactive-banner__text p strong {
  display: inline;
  color: #78350f;
  font-weight: 700;
}
@media (max-width: 520px) {
  .ref-inactive-banner { flex-direction: column; gap: 10px; padding: 14px 16px; }
  .ref-inactive-banner__icon { font-size: 28px; }
}

/* =====================================================================
   🎁 Referrals — Commission display card
   ===================================================================== */
.ref-commission-card {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #059669 100%);
  color: #fff;
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: 0 20px 50px rgba(37,99,235,0.25);
  position: relative;
  overflow: hidden;
}
.ref-commission-card::before {
  content: '';
  position: absolute; top: -50%; right: -10%;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.ref-commission-card__hero {
  display: flex; align-items: center; gap: 28px;
  position: relative; z-index: 1;
}
.ref-commission-card__pct-wrap {
  flex-shrink: 0;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 20px 28px;
  text-align: center;
  border: 2px solid rgba(255,255,255,0.25);
}
.ref-commission-card__pct {
  display: block;
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}
.ref-commission-card__pct-wrap small {
  display: block;
  font-size: 13px;
  opacity: 0.9;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ref-commission-card__info { flex: 1; min-width: 0; }
.ref-commission-card__badges {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.ref-commission-card__badges .badge {
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-weight: 700;
}
.ref-commission-card__info h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
}
.ref-commission-card__info p {
  margin: 0;
  font-size: 14px;
  color: rgba(255,255,255,0.85) !important;
}

/* Examples */
.ref-commission-card__examples {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.2);
  position: relative; z-index: 1;
}
.ref-commission-card__examples-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 16px;
  color: rgba(255,255,255,0.95);
}
.ref-commission-card__examples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.ref-plan-earn {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: 14px 16px;
}
.ref-plan-earn__name {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; opacity: 0.85;
  margin-bottom: 6px;
}
.ref-plan-earn__price {
  font-size: 13px; color: rgba(255,255,255,0.7);
}
.ref-plan-earn__price small {
  font-size: 11px; opacity: 0.8;
}
.ref-plan-earn__earn {
  margin-top: 8px;
  font-size: 22px; font-weight: 900;
  color: #86efac;
  line-height: 1.1;
}
.ref-plan-earn__earn small {
  display: block;
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.8);
  margin-top: 2px;
}
.ref-plan-earn__year {
  margin-top: 6px;
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.75);
}
.ref-commission-card__tip {
  margin: 18px 0 0;
  padding: 12px 16px;
  background: rgba(0,0,0,0.2);
  border-radius: 10px;
  font-size: 14px !important;
  line-height: 1.5;
}
.ref-commission-card__note {
  margin: 12px 0 0 !important;
  padding: 10px 14px;
  background: rgba(245,158,11,0.25);
  border-left: 3px solid #fbbf24;
  border-radius: 8px;
  font-size: 12.5px !important;
  line-height: 1.5;
  color: rgba(255,255,255,0.95) !important;
}
.ref-commission-card__note strong { color: #fbbf24; }

/* Responsive */
@media (max-width: 720px) {
  .ref-commission-card { padding: 24px 20px; }
  .ref-commission-card__hero { flex-direction: column; text-align: center; gap: 16px; }
  .ref-commission-card__pct { font-size: 48px; }
  .ref-commission-card__info h2 { font-size: 18px; }
  .ref-commission-card__examples-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .ref-plan-earn { padding: 12px; }
  .ref-plan-earn__earn { font-size: 18px; }
}
@media (max-width: 480px) {
  .ref-commission-card__examples-grid { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   📂 Subcategorías — Storefront drill-down
   ===================================================================== */
.cat-pill--has-children .cat-pill__arrow {
  margin-left: 4px; opacity: 0.6; font-weight: 400;
}

/* === Subcategorías: diseño moderno con scroll horizontal suave === */
/* CRÍTICO: el atributo `hidden` debe prevalecer sobre display:flex */
.subcat-menu-wrap[hidden],
.subcat-nav[hidden] { display: none !important; }
.subcat-menu-wrap {
  max-width: 1280px; margin: 0 auto;
  padding: 2px 16px 12px;
  animation: subcat-fadein .35s ease-out;
  position: relative;
  display: flex; align-items: center;
  gap: 4px;
}
@keyframes subcat-fadein {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.subcat-menu {
  flex: 1; min-width: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  padding: 0 8px;
  cursor: grab;
}
.subcat-menu:active { cursor: grabbing; }
.subcat-menu.is-grabbing {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
  mask-image: none;
  -webkit-mask-image: none;
}
.subcat-menu::-webkit-scrollbar { display: none; }

/* Pills con snap */
.subcat-pill { scroll-snap-align: center; }

/* Botones flecha de navegación (solo aparecen si hay overflow) */
.subcat-nav {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.15);
  color: inherit;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background .15s, transform .1s, opacity .2s;
  line-height: 1;
  backdrop-filter: blur(4px);
  z-index: 2;
}
.subcat-nav:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.08);
}
.subcat-nav:active { transform: scale(0.95); }
.subcat-nav:disabled {
  opacity: 0.3; cursor: not-allowed;
  transform: none;
}
.store-page--light .subcat-nav {
  background: rgba(15, 23, 42, 0.08);
  color: #475569;
}
.store-page--light .subcat-nav:hover {
  background: rgba(15, 23, 42, 0.14);
  color: #0f172a;
}
.store-page--dark .subcat-nav {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.store-page--dark .subcat-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}
/* En móvil: ocultar flechas — solo scroll táctil */
@media (max-width: 640px) {
  .subcat-nav { display: none; }
}

.subcat-pills {
  display: inline-flex; gap: 6px;
  flex-wrap: nowrap;
  padding: 4px 0;
}

.subcat-pill {
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: color .15s, background .15s, transform .1s;
  white-space: nowrap;
  position: relative;
}
.subcat-pill:hover {
  color: #0f172a;
  background: rgba(15, 23, 42, 0.06);
}
.subcat-pill:active { transform: scale(0.96); }
.subcat-pill.is-active {
  background: var(--accent, #6366f1);
  color: #fff;
  box-shadow: 0 4px 12px -2px rgba(99, 102, 241, 0.4),
              inset 0 0 0 0.5px rgba(255, 255, 255, 0.2);
}

/* Breadcrumb standalone oculto (legacy, reemplazado por la barra unificada) */
.cat-breadcrumb { display: none !important; }

/* ---- Dark theme ---- */
.store-page--dark .subcat-pill {
  color: rgba(255, 255, 255, 0.55);
}
.store-page--dark .subcat-pill:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.store-page--dark .subcat-pill.is-active {
  background: var(--accent, #facc15);
  color: #0f172a;
  box-shadow: 0 4px 14px -2px rgba(250, 204, 21, 0.45);
}

/* ---- Light theme: pill activo usa accent con texto blanco o oscuro según contraste ---- */
.store-page--light .subcat-pill { color: #64748b; }
.store-page--light .subcat-pill:hover {
  background: rgba(15, 23, 42, 0.05);
  color: #0f172a;
}
.store-page--light .subcat-pill.is-active {
  background: var(--accent, #2563eb);
  color: #fff;
}

/* Responsive mobile */
@media (max-width: 640px) {
  .subcat-menu-wrap { padding: 0 8px 8px; }
  .subcat-menu { padding: 0 10px; }
  .subcat-pill { padding: 6px 14px; font-size: 12px; }
}

/* =====================================================================
   🪟 Unified modal system — z-index scale
   ===================================================================== */
:root {
  --z-base:     1;
  --z-content:  10;
  --z-header:   500;
  --z-dropdown: 8000;
  --z-tooltip:  8500;
  --z-overlay:  9000;
  --z-drawer:   9500;
  --z-modal:    10000;
  --z-toast:    10100;
  --z-critical: 11000;
}
/* Standardize z-indexes of known overlays */
.cart-backdrop      { z-index: var(--z-overlay) !important; }
.cart-drawer        { z-index: var(--z-drawer) !important; }
.wish-drawer        { z-index: var(--z-drawer) !important; }
.ai-theme-modal     { z-index: var(--z-modal) !important; }
.fb-upgrade         { z-index: var(--z-overlay) !important; }
.fb-print-block     { z-index: var(--z-critical) !important; }
.cookie-banner      { z-index: var(--z-toast) !important; }
.pwa-install        { z-index: var(--z-drawer) !important; }
.toast              { z-index: var(--z-toast) !important; }
.flash              { z-index: var(--z-toast) !important; }
.wa-float           { z-index: var(--z-drawer) !important; }
.fb-fab-cart        { z-index: var(--z-drawer) !important; }

/* Body lock when modal open (applied via JS) */
body.modal-open { overflow: hidden; }

/* =====================================================================
   ✨ AI Theme Generator — Button + Modal
   ===================================================================== */
.theme-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.theme-header label { margin: 0; }

/* AI button — gradient + sparkle */
.btn--ai {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  color: #fff; border: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  font-weight: 700; font-size: 14px;
  cursor: pointer; position: relative;
  box-shadow: 0 4px 14px rgba(139,92,246,0.35);
  transition: transform .2s, box-shadow .2s;
}
.btn--ai:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(139,92,246,0.5);
}
.btn--ai:disabled {
  opacity: .55; cursor: not-allowed; transform: none;
  filter: grayscale(0.3);
  animation: ai-pulse 1.4s ease-in-out infinite;
}
@keyframes ai-pulse { 0%, 100% { opacity: .55; } 50% { opacity: .75; } }

/* === Créditos IA — badge DENTRO del botón IA === */
/* Se inyecta automáticamente por ai-credits.js en todo .btn--ai */
.ai-btn-credits {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px;
  padding: 0 8px;
  margin-left: 8px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  flex-shrink: 0;
  transition: background .2s, transform .2s;
}
.ai-btn-credits::before {
  content: '⚡';
  margin-right: 3px;
  font-size: 10px;
}
.ai-btn-credits.is-low {
  background: rgba(251, 191, 36, 0.9);
  color: #78350f;
  border-color: rgba(217, 119, 6, 0.4);
  animation: ai-badge-pulse 1.8s ease infinite;
}
.ai-btn-credits.is-empty {
  background: rgba(239, 68, 68, 0.95);
  color: #fff;
  border-color: rgba(185, 28, 28, 0.6);
}
@keyframes ai-badge-pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.1); }
}
/* Animación al decrementar */
.ai-btn-credits.is-decrementing {
  animation: ai-badge-dec .45s cubic-bezier(.5,1.5,.5,1);
}
@keyframes ai-badge-dec {
  0%   { transform: scale(1); background: rgba(239, 68, 68, 0.9); }
  40%  { transform: scale(1.3); background: rgba(239, 68, 68, 0.9); }
  100% { transform: scale(1); }
}

/* Botones blancos / outline: invertir colores del badge */
.btn--outline .ai-btn-credits,
.btn--ghost .ai-btn-credits,
.cat-ai-btn .ai-btn-credits {
  background: rgba(99, 102, 241, 0.12);
  color: #4338ca;
  border-color: rgba(99, 102, 241, 0.25);
}

/* === Créditos IA — badge indicador (legacy, para indicator separado) === */
.ai-credits-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px;
  padding: 0 7px;
  background: rgba(99, 102, 241, 0.15);
  color: #4338ca;
  border-radius: 999px;
  font-size: 11px; font-weight: 800;
  margin-left: 6px;
  line-height: 1;
}
.ai-credits-badge--low {
  background: rgba(245, 158, 11, 0.2); color: #b45309;
  animation: credits-pulse 2s ease infinite;
}
.ai-credits-badge--empty {
  background: rgba(239, 68, 68, 0.2); color: #991b1b;
}
@keyframes credits-pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.08); }
}

/* Botón IA sin créditos */
.btn--ai.is-no-credits,
[data-ai-btn].is-no-credits,
.btn.is-no-credits {
  opacity: 0.55;
  cursor: not-allowed !important;
  filter: grayscale(0.5);
  position: relative;
}
.btn.is-no-credits::after {
  content: '⚡ 0 créditos';
  position: absolute;
  top: -8px; right: -8px;
  background: #dc2626; color: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  pointer-events: none;
}

/* Empty state cuando no hay créditos */
.ai-credits-empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 24px 20px;
  background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
  border: 1.5px dashed #f59e0b;
  border-radius: 14px;
  margin: 12px 0;
}
.ai-credits-empty__icon {
  font-size: 36px; margin-bottom: 8px;
  animation: credits-pulse 2s ease infinite;
}
.ai-credits-empty strong {
  color: #78350f; font-size: 15px;
  margin-bottom: 6px;
}
.ai-credits-empty p { margin: 0; color: #92400e; font-size: 13px; }
.ai-spark {
  display: inline-block;
  animation: ai-sparkle 2s ease-in-out infinite;
  font-size: 16px;
}
@keyframes ai-sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50%      { transform: scale(1.3) rotate(15deg); opacity: 0.8; }
}

/* Modal */
.ai-theme-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.ai-theme-modal[hidden] { display: none; }
.ai-theme-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(15,23,42,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ai-theme-modal__dialog {
  position: relative;
  background: #fff;
  border-radius: 20px;
  width: 100%; max-width: 540px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  animation: modalIn .3s cubic-bezier(.4,0,.2,1);
}
@keyframes modalIn {
  from { transform: translateY(30px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.ai-theme-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.ai-theme-modal__head h3 {
  margin: 0; font-size: 18px; font-weight: 800;
  background: linear-gradient(135deg, #6366f1, #ec4899);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.ai-theme-modal__close {
  background: transparent; border: none;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 22px; cursor: pointer;
  color: #64748b;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.ai-theme-modal__close:hover { background: #f1f5f9; color: #0f172a; }
.ai-theme-modal__body { padding: 24px; }

/* States */
.ai-theme-intro {
  font-size: 14px; line-height: 1.6; color: #475569;
  margin: 0 0 16px;
}
.ai-theme-features {
  list-style: none; padding: 0; margin: 0 0 20px;
  display: grid; gap: 10px;
}
.ai-theme-features li {
  font-size: 13px; color: #0f172a;
  padding: 10px 14px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid #f1f5f9;
}

/* Loading */
.ai-theme-spinner {
  width: 60px; height: 60px; margin: 20px auto;
  border: 4px solid #e2e8f0;
  border-top-color: #8b5cf6;
  border-right-color: #ec4899;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ai-theme-loading-msg {
  text-align: center; font-size: 14px; color: #64748b;
  font-weight: 600;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Result — hero banner con tema sugerido en grande */
.ai-theme-result { margin-bottom: 20px; }
.ai-theme-result__hero {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 20px 16px;
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(236,72,153,.08));
  border: 1px solid rgba(99,102,241,.15);
  border-radius: 14px;
  margin-bottom: 16px;
  text-align: center;
}
.ai-theme-result__hero-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #6366f1;
}
.ai-theme-result__hero-name {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px;
  font-size: 22px; font-weight: 800; color: #0f172a;
  line-height: 1.2;
}
.ai-theme-hero__ico { font-size: 28px; line-height: 1; }
.ai-theme-hero__label { color: #0f172a; }
.ai-theme-hero__hint {
  display: block; width: 100%; margin-top: 2px;
  font-size: 12px; font-weight: 500; color: #64748b;
  text-transform: uppercase; letter-spacing: .06em;
}

.ai-theme-result__colors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.ai-color {
  text-align: center;
  padding: 8px 6px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  transition: transform .15s, box-shadow .15s;
}
.ai-color:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,23,42,.08); }
.ai-color--big {
  grid-column: span 2;
  background: linear-gradient(135deg, rgba(99,102,241,.05), rgba(236,72,153,.05));
  border: 2px solid #6366f1;
}
.ai-color__swatch {
  width: 100%; aspect-ratio: 1.4;
  max-height: 48px;
  border-radius: 8px; margin-bottom: 6px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 2px 4px rgba(15,23,42,.06);
  border: 1px solid rgba(0,0,0,0.08);
}
.ai-color--big .ai-color__swatch { aspect-ratio: 2.2; max-height: 52px; }
.ai-color__label {
  font-size: 10px; font-weight: 700; color: #475569;
  text-transform: uppercase; letter-spacing: 0.05em;
  line-height: 1.2;
}
.ai-color__hex {
  display: block; margin-top: 2px;
  font-size: 10px; font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  color: #94a3b8;
}

.ai-theme-result__meta {
  background: #fafbfc;
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid #f1f5f9;
}
.ai-theme-reasoning {
  font-size: 13px; line-height: 1.55; color: #475569;
  font-style: italic;
  margin: 0;
  padding-left: 12px;
  border-left: 3px solid #e0e7ff;
}

.ai-theme-modal__actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: flex-end;
}
.ai-theme-modal__actions .btn { font-weight: 700; }
.ai-theme-modal__actions .btn--outline { flex: 1; min-width: 140px; }
.ai-theme-modal__actions .btn--ai { flex: 2; min-width: 180px; }

/* Error */
.ai-theme-error-msg {
  text-align: center; color: #dc2626; font-weight: 600;
  padding: 20px; background: #fef2f2; border-radius: 10px;
  margin: 0 0 16px;
}

/* Mobile */
@media (max-width: 520px) {
  .ai-theme-modal__dialog { border-radius: 16px; }
  .ai-theme-modal__head { padding: 16px 20px; }
  .ai-theme-modal__body { padding: 20px; }
  .ai-theme-result__colors { grid-template-columns: repeat(3, 1fr); }
  .ai-color--big { grid-column: span 3; }
  .ai-theme-modal__actions { flex-direction: column; }
  .ai-theme-modal__actions .btn { width: 100%; }
  .btn--ai { padding: 8px 14px; font-size: 13px; }
}

/* =====================================================================
   🎨 Themes v2 — Header, search, pills, bottom-nav overrides
   Cubre los componentes globales (.store-actions-row, .catalog-search,
   .cat-menu pills, .view-toggle) para que COMBINEN con cada tema.
   Temas CLAROS e INTERMEDIOS necesitan fondo claro;
   temas OSCUROS (noir/magazine-dark/luxury-gold) usan el default dark + tweaks.
   ===================================================================== */

/* ---------- CLAROS: pure, magazine-light, aurora-light ---------------- */
.store-page--pure .store-actions-row,
.store-page--magazine-light .store-actions-row,
.store-page--aurora-light .store-actions-row {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.store-page--pure .store-action,
.store-page--magazine-light .store-action,
.store-page--aurora-light .store-action {
  background: rgba(0,0,0,0.04); color: #0f172a; border: 1px solid rgba(0,0,0,0.06);
}
.store-page--pure .store-action:hover,
.store-page--magazine-light .store-action:hover,
.store-page--aurora-light .store-action:hover {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.store-page--pure .catalog-search,
.store-page--magazine-light .catalog-search,
.store-page--aurora-light .catalog-search {
  background: #fff; color: #0f172a; border-color: rgba(0,0,0,0.08);
}
.store-page--pure .catalog-search::placeholder,
.store-page--magazine-light .catalog-search::placeholder,
.store-page--aurora-light .catalog-search::placeholder { color: #64748b; }
.store-page--pure .view-toggle__btn,
.store-page--magazine-light .view-toggle__btn,
.store-page--aurora-light .view-toggle__btn {
  background: rgba(0,0,0,0.04); color: #475569; border: 1px solid rgba(0,0,0,0.08);
}
.store-page--pure .view-toggle__btn.is-active,
.store-page--magazine-light .view-toggle__btn.is-active,
.store-page--aurora-light .view-toggle__btn.is-active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.store-page--pure .cat-menu .cat-pill,
.store-page--magazine-light .cat-menu .cat-pill,
.store-page--aurora-light .cat-menu .cat-pill {
  background: rgba(0,0,0,0.04); color: #334155; border: 1px solid rgba(0,0,0,0.06);
}
.store-page--pure .cat-menu .cat-pill.is-active,
.store-page--magazine-light .cat-menu .cat-pill.is-active,
.store-page--aurora-light .cat-menu .cat-pill.is-active {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.store-page--pure .store-header__name,
.store-page--magazine-light .store-header__name,
.store-page--aurora-light .store-header__name,
.store-page--pure .store-header__desc,
.store-page--magazine-light .store-header__desc,
.store-page--aurora-light .store-header__desc,
.store-page--pure .store-header__hours,
.store-page--magazine-light .store-header__hours,
.store-page--aurora-light .store-header__hours { color: inherit; }
.store-page--pure .bottom-nav,
.store-page--magazine-light .bottom-nav,
.store-page--aurora-light .bottom-nav {
  background: rgba(255,255,255,0.95); backdrop-filter: blur(14px);
  border-top: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 -2px 12px rgba(15,23,42,.06);
  color: #334155;
}
/* Íconos con buen contraste sobre fondo claro */
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .bottom-nav__item {
  color: #475569;
}
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .bottom-nav__item:hover {
  color: #0f172a;
  background: rgba(15,23,42,.06);
}
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .bottom-nav__item.is-active {
  color: #fff; /* activo sigue usando accent con fondo */
}

/* ═══════════════════════════════════════════════
   Redes sociales del storefront (bajo el header)
   ═══════════════════════════════════════════════ */
.store-socials {
  display: flex; justify-content: center; align-items: center;
  gap: 10px;
  padding: 8px 16px 0;
  max-width: 1200px;
  margin: 0 auto;
}
.store-socials__item {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  text-decoration: none;
  transition: transform .15s, background .2s, color .2s, box-shadow .2s;
}
.store-socials__item:hover {
  transform: translateY(-2px) scale(1.05);
  color: #fff;
}
/* Colores de marca al hover — cada red con su color oficial */
.store-socials__item--instagram:hover {
  background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(220,39,67,.4);
}
.store-socials__item--facebook:hover {
  background: #1877f2; border-color: #1877f2;
  box-shadow: 0 6px 18px rgba(24,119,242,.4);
}
.store-socials__item--tiktok:hover {
  background: #000; border-color: #000;
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
}
.store-socials__item--youtube:hover {
  background: #ff0000; border-color: #ff0000;
  box-shadow: 0 6px 18px rgba(255,0,0,.4);
}
.store-socials__item--x:hover {
  background: #000; border-color: #000;
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
}

/* Overrides por tema: fondos claros en temas claros/intermedios */
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .store-socials__item {
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.08);
  color: #475569;
}
.store-page--glassmorph .store-socials__item {
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.6);
  color: #1e1b4b;
}
.store-page--magazine-dark .store-socials__item {
  background: rgba(245,238,220,0.08);
  border: 1px solid rgba(245,238,220,0.15);
  color: #f5eedc;
}
.store-page--luxury-gold .store-socials__item {
  background: rgba(212,175,55,0.08);
  border: 1px solid rgba(212,175,55,0.25);
  color: #f5e6b8;
}

/* Mobile: íconos un poco más pequeños */
@media (max-width: 640px) {
  .store-socials { padding: 6px 12px 0; gap: 8px; }
  .store-socials__item { width: 36px; height: 36px; }
  .store-socials__item svg { width: 18px; height: 18px; }
}
.store-page--pure .subcat-pill,
.store-page--magazine-light .subcat-pill,
.store-page--aurora-light .subcat-pill { color: #475569; }
.store-page--pure .subcat-pill:hover,
.store-page--magazine-light .subcat-pill:hover,
.store-page--aurora-light .subcat-pill:hover { background: rgba(0,0,0,0.04); color: #0f172a; }
.store-page--pure .subcat-pill.is-active,
.store-page--magazine-light .subcat-pill.is-active,
.store-page--aurora-light .subcat-pill.is-active { background: var(--accent); color: #fff; }

/* ---------- INTERMEDIOS: warm, botanical, glassmorph ------------------ */
.store-page--warm .store-actions-row {
  background: rgba(245,239,230,0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid #e6dbc8;
}
.store-page--warm .store-action { background: #fefbf5; color: #2a241c; border: 1px solid #ede3cf; }
.store-page--warm .catalog-search { background: #fefbf5; color: #2a241c; border-color: #ede3cf; }
.store-page--warm .catalog-search::placeholder { color: #8a7c5f; }
.store-page--warm .view-toggle__btn { background: #fefbf5; color: #7c5a2b; border: 1px solid #ede3cf; }
.store-page--warm .view-toggle__btn.is-active { background: #7c5a2b; color: #fefbf5; border-color: #7c5a2b; }
.store-page--warm .cat-menu .cat-pill { background: #fefbf5; color: #5c4520; border: 1px solid #ede3cf; }
.store-page--warm .cat-menu .cat-pill.is-active { background: #7c5a2b; color: #fefbf5; border-color: #7c5a2b; }
.store-page--warm .bottom-nav { background: rgba(245,239,230,0.95); border-top: 1px solid #e6dbc8; color: #5c4520; }
.store-page--warm .subcat-pill { color: #7c5a2b; }
.store-page--warm .subcat-pill.is-active { background: #7c5a2b; color: #fefbf5; }

.store-page--botanical .store-actions-row {
  background: rgba(238,243,236,0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid #cedcc8;
}
.store-page--botanical .store-action { background: #fff; color: #1f2d1f; border: 1px solid #d4e0cc; }
.store-page--botanical .catalog-search { background: #fff; color: #1f2d1f; border-color: #d4e0cc; }
.store-page--botanical .catalog-search::placeholder { color: #6b8b67; }
.store-page--botanical .view-toggle__btn { background: #fff; color: #3d6b3d; border: 1px solid #d4e0cc; }
.store-page--botanical .view-toggle__btn.is-active { background: #3d6b3d; color: #f5f8f3; border-color: #3d6b3d; }
.store-page--botanical .cat-menu .cat-pill { background: #fff; color: #1f2d1f; border: 1px solid #d4e0cc; }
.store-page--botanical .cat-menu .cat-pill.is-active { background: #3d6b3d; color: #f5f8f3; border-color: #3d6b3d; }
.store-page--botanical .bottom-nav { background: rgba(238,243,236,0.95); border-top: 1px solid #cedcc8; color: #1f2d1f; }
.store-page--botanical .subcat-pill { color: #3d6b3d; }
.store-page--botanical .subcat-pill.is-active { background: #3d6b3d; color: #f5f8f3; }

.store-page--glassmorph .store-actions-row {
  background: rgba(255,255,255,0.35); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,0.4);
}
.store-page--glassmorph .store-action {
  background: rgba(255,255,255,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #1e1b4b; border: 1px solid rgba(255,255,255,0.5);
}
.store-page--glassmorph .catalog-search {
  background: rgba(255,255,255,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #1e1b4b; border-color: rgba(255,255,255,0.5);
}
.store-page--glassmorph .catalog-search::placeholder { color: rgba(30,27,75,0.6); }
.store-page--glassmorph .view-toggle__btn {
  background: rgba(255,255,255,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #1e1b4b; border: 1px solid rgba(255,255,255,0.5);
}
.store-page--glassmorph .view-toggle__btn.is-active { background: rgba(30,27,75,0.85); color: #fff; border-color: rgba(30,27,75,0.85); }
.store-page--glassmorph .bottom-nav {
  background: rgba(255,255,255,0.5); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-top: 1px solid rgba(255,255,255,0.4); color: #1e1b4b;
}
.store-page--glassmorph .subcat-pill { color: #1e1b4b; }
.store-page--glassmorph .subcat-pill.is-active { background: rgba(30,27,75,0.85); color: #fff; backdrop-filter: blur(10px); }

/* ---------- OSCUROS: noir, magazine-dark, luxury-gold (tweaks) -------- */
.store-page--noir .store-actions-row { background: rgba(10,10,10,0.9); border-bottom-color: rgba(255,255,255,0.08); }
.store-page--noir .store-action { background: rgba(255,255,255,0.06); color: #fafafa; border-color: rgba(255,255,255,0.1); }
.store-page--noir .catalog-search { background: rgba(255,255,255,0.06); color: #fafafa; border-color: rgba(255,255,255,0.1); }
.store-page--noir .cat-menu .cat-pill { background: rgba(255,255,255,0.06); color: #e5e5e5; border-color: rgba(255,255,255,0.1); }
.store-page--noir .cat-menu .cat-pill.is-active { background: #fff; color: #000; border-color: #fff; }
.store-page--noir .bottom-nav { background: rgba(10,10,10,0.95); color: #fafafa; border-top: 1px solid rgba(255,255,255,0.08); }

.store-page--magazine-dark .store-actions-row { background: rgba(26,22,18,0.9); border-bottom-color: rgba(245,238,220,0.1); }
.store-page--magazine-dark .store-action { background: rgba(245,238,220,0.05); color: #f5eedc; border-color: rgba(245,238,220,0.1); }
.store-page--magazine-dark .catalog-search { background: rgba(245,238,220,0.05); color: #f5eedc; border-color: rgba(245,238,220,0.12); }
.store-page--magazine-dark .cat-menu .cat-pill { background: rgba(245,238,220,0.05); color: #e5dfcc; border-color: rgba(245,238,220,0.1); }
.store-page--magazine-dark .cat-menu .cat-pill.is-active { background: #f5eedc; color: #1a1612; border-color: #f5eedc; }
.store-page--magazine-dark .bottom-nav { background: rgba(26,22,18,0.95); color: #f5eedc; border-top: 1px solid rgba(245,238,220,0.1); }

.store-page--luxury-gold .store-actions-row { background: rgba(10,8,6,0.92); backdrop-filter: blur(14px); border-bottom-color: rgba(212,175,55,0.2); }
.store-page--luxury-gold .store-action { background: rgba(212,175,55,0.08); color: #f5e6b8; border-color: rgba(212,175,55,0.2); }
.store-page--luxury-gold .store-action:hover { background: linear-gradient(135deg, #d4af37, #a8842a); color: #0a0806; border-color: #d4af37; }
.store-page--luxury-gold .catalog-search { background: rgba(212,175,55,0.05); color: #f5e6b8; border-color: rgba(212,175,55,0.2); }
.store-page--luxury-gold .catalog-search::placeholder { color: rgba(245,230,184,0.5); }
.store-page--luxury-gold .view-toggle__btn { background: rgba(212,175,55,0.08); color: #f5e6b8; border: 1px solid rgba(212,175,55,0.2); }
.store-page--luxury-gold .view-toggle__btn.is-active { background: linear-gradient(135deg, #d4af37, #a8842a); color: #0a0806; border-color: #d4af37; }
.store-page--luxury-gold .cat-menu .cat-pill { background: rgba(212,175,55,0.08); color: #f5e6b8; border: 1px solid rgba(212,175,55,0.2); }
.store-page--luxury-gold .cat-menu .cat-pill.is-active { background: linear-gradient(135deg, #d4af37, #a8842a); color: #0a0806; border-color: #d4af37; }
.store-page--luxury-gold .bottom-nav { background: rgba(10,8,6,0.95); color: #f5e6b8; border-top: 1px solid rgba(212,175,55,0.2); }
.store-page--luxury-gold .subcat-pill { color: rgba(245,230,184,0.7); }
.store-page--luxury-gold .subcat-pill.is-active { background: linear-gradient(135deg, #d4af37, #a8842a); color: #0a0806; }

/* =====================================================================
   🎨 THEMES v2 — Matriz 3 luminosidades × 3 estilos (9 temas)
   Claro:      pure · magazine-light · aurora-light
   Intermedio: warm · botanical     · glassmorph
   Oscuro:     noir · magazine-dark · luxury-gold
   ===================================================================== */

/* --- CLARO / MINIMAL — Pure -------------------------------------------- */
.store-page--pure { background: #ffffff !important; color: #0f172a; font-family: 'Inter','Plus Jakarta Sans',sans-serif; }
.store-page--pure .header { background:#fff; border-bottom:1px solid #f1f5f9; }
.store-page--pure .product-card { background:#fff !important; border:1px solid #f1f5f9 !important; box-shadow:0 1px 3px rgba(15,23,42,.04); border-radius:14px; transition:transform .25s ease, box-shadow .25s ease; }
.store-page--pure .product-card:hover { transform:translateY(-3px); box-shadow:0 10px 25px rgba(15,23,42,.08); }
.store-page--pure .product-card__name { font-weight:600; color:#0f172a; }
.store-page--pure .product-card__price strong { color:#0f172a; }
.store-page--pure .product-card__add { background:#0f172a; color:#fff; border-radius:10px; border:none; font-weight:600; }
.store-page--pure .category-tabs__tab.is-active { background:#0f172a; color:#fff; border-color:#0f172a; }

/* --- CLARO / EDITORIAL — Magazine Light -------------------------------- */
.store-page--magazine-light { background:#fbf8f3 !important; color:#1f1a14; font-family:'Playfair Display',Georgia,serif; }
.store-page--magazine-light .header { background:#fbf8f3; border-bottom:1px solid #e8dfd1; }
.store-page--magazine-light .banner__title { font-weight:400; letter-spacing:.02em; color:#1f1a14; }
.store-page--magazine-light .product-card { background:#fff; border:1px solid #ece4d4; border-radius:4px; box-shadow:0 2px 6px rgba(120,90,50,.05); }
.store-page--magazine-light .product-card__name { font-family:'Playfair Display',serif; font-weight:500; font-size:17px; color:#1f1a14; }
.store-page--magazine-light .product-card__price strong { font-family:'Plus Jakarta Sans',sans-serif; color:#1f1a14; font-weight:600; }
.store-page--magazine-light .product-card__add { background:#1f1a14; color:#fbf8f3; border:none; border-radius:2px; text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:600; }
.store-page--magazine-light .category-tabs__tab.is-active { background:transparent; color:#1f1a14; border:none; border-bottom:2px solid #1f1a14; border-radius:0; }
.store-page--magazine-light .category-tabs__tab { border:none; color:#7a6c55; }

/* --- CLARO / PREMIUM — Aurora Light (gradiente animado sutil) ---------- */
.store-page--aurora-light {
  background:
    radial-gradient(ellipse at 10% 0%,  color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%),
    radial-gradient(ellipse at 90% 100%, color-mix(in srgb, #ec4899 18%, transparent), transparent 55%),
    linear-gradient(180deg, #fdf4ff, #fef9ff) !important;
  background-attachment: fixed !important;
  color:#3b1a4a;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.store-page--aurora-light::before {
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%);
  animation: auroraShift 18s ease-in-out infinite alternate;
}
@keyframes auroraShift {
  0%   { transform: translate(-5%, -3%) scale(1);   opacity:.6; }
  100% { transform: translate(5%, 3%)   scale(1.15); opacity:1;  }
}
.store-page--aurora-light .header { background: rgba(255,255,255,0.7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom:1px solid rgba(236,72,153,.1); }
.store-page--aurora-light .product-card { background: rgba(255,255,255,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border:1px solid rgba(236,72,153,.12); border-radius:18px; box-shadow: 0 8px 24px rgba(168,85,247,.06); transition: transform .3s ease, box-shadow .3s ease; }
.store-page--aurora-light .product-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(168,85,247,.15); }
.store-page--aurora-light .product-card__name { font-weight:700; color:#3b1a4a; }
.store-page--aurora-light .product-card__price strong { background: linear-gradient(90deg, var(--accent), #ec4899); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-weight:800; }
.store-page--aurora-light .product-card__add { background: linear-gradient(135deg, var(--accent), #ec4899); color:#fff; border:none; border-radius:12px; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent); font-weight:700; }
.store-page--aurora-light .category-tabs__tab.is-active { background: linear-gradient(135deg, var(--accent), #ec4899); color:#fff; border:none; border-radius:12px; }

/* --- INTERMEDIO / MINIMAL — Warm --------------------------------------- */
.store-page--warm { background:#f5efe6 !important; color:#2a241c; font-family:'Plus Jakarta Sans',sans-serif; }
.store-page--warm .header { background:#f5efe6; border-bottom:1px solid #e6dbc8; }
.store-page--warm .product-card { background:#fefbf5; border:1px solid #ede3cf; border-radius:16px; box-shadow:0 4px 12px rgba(100,70,30,.05); }
.store-page--warm .product-card:hover { transform:translateY(-3px); box-shadow:0 10px 22px rgba(100,70,30,.1); }
.store-page--warm .product-card__name { font-weight:700; color:#2a241c; }
.store-page--warm .product-card__price strong { color:#7c5a2b; font-weight:800; }
.store-page--warm .product-card__add { background:#7c5a2b; color:#fff; border:none; border-radius:12px; font-weight:700; }
.store-page--warm .category-tabs__tab.is-active { background:#7c5a2b; color:#fff; border-radius:12px; border-color:#7c5a2b; }

/* --- INTERMEDIO / EDITORIAL — Botanical -------------------------------- */
.store-page--botanical { background:#eef3ec !important; color:#1f2d1f; font-family:'Playfair Display',Georgia,serif; }
.store-page--botanical .header { background:#eef3ec; border-bottom:1px solid #cedcc8; }
.store-page--botanical .banner__title { color:#1f2d1f; font-weight:500; letter-spacing:.02em; }
.store-page--botanical .product-card { background:#fff; border:1px solid #d4e0cc; border-radius: 20px 8px 20px 8px; box-shadow:0 3px 10px rgba(40,80,40,.05); }
.store-page--botanical .product-card__name { font-family:'Playfair Display',serif; font-weight:500; font-size:17px; color:#1f2d1f; }
.store-page--botanical .product-card__price strong { color:#3d6b3d; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; }
.store-page--botanical .product-card__add { background:#3d6b3d; color:#f5f8f3; border:none; border-radius:10px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:11px; }
.store-page--botanical .category-tabs__tab.is-active { background:#3d6b3d; color:#f5f8f3; border-color:#3d6b3d; border-radius:8px; }

/* --- INTERMEDIO / PREMIUM — Glassmorph (glass + blur) ------------------ */
.store-page--glassmorph {
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(14,165,233,.2), transparent 55%),
    linear-gradient(135deg, #e0e7ff, #c7d2fe) !important;
  background-attachment: fixed !important;
  color:#1e1b4b;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.store-page--glassmorph .header { background: rgba(255,255,255,0.35); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom:1px solid rgba(255,255,255,.4); }
.store-page--glassmorph .product-card { background: rgba(255,255,255,0.4); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border:1px solid rgba(255,255,255,.5); border-radius:20px; box-shadow: 0 8px 32px rgba(30,27,75,.08), inset 0 1px 0 rgba(255,255,255,.5); transition: transform .3s ease; }
.store-page--glassmorph .product-card:hover { transform: translateY(-4px) scale(1.01); }
.store-page--glassmorph .product-card__name { font-weight:700; color:#1e1b4b; }
.store-page--glassmorph .product-card__price strong { color:#1e1b4b; font-weight:800; }
.store-page--glassmorph .product-card__add { background: rgba(30,27,75,.9); color:#fff; border:1px solid rgba(255,255,255,.3); border-radius:14px; backdrop-filter: blur(10px); font-weight:700; }
.store-page--glassmorph .category-tabs__tab.is-active { background: rgba(30,27,75,.85); color:#fff; border-radius:14px; backdrop-filter: blur(10px); border:none; }
.store-page--glassmorph .category-tabs__tab { background: rgba(255,255,255,.4); backdrop-filter: blur(10px); border:1px solid rgba(255,255,255,.5); border-radius:14px; color:#1e1b4b; }

/* --- OSCURO / MINIMAL — Noir ------------------------------------------- */
.store-page--noir { background:#000 !important; color:#fafafa; font-family:'Inter','Plus Jakarta Sans',sans-serif; }
.store-page--noir .header { background:#0a0a0a; border-bottom:1px solid rgba(255,255,255,.08); }
.store-page--noir .product-card { background:#0f0f0f; border:1px solid rgba(255,255,255,.08); border-radius:14px; color:#fafafa; }
.store-page--noir .product-card:hover { border-color:rgba(255,255,255,.2); transform:translateY(-3px); }
.store-page--noir .product-card__name { font-weight:300; letter-spacing:.02em; color:#fafafa; }
.store-page--noir .product-card__price strong { color:#fafafa; font-weight:600; }
.store-page--noir .product-card__add { background:#fff; color:#000; border:none; border-radius:8px; font-weight:600; }
.store-page--noir .category-tabs__tab.is-active { background:#fff; color:#000; border-color:#fff; border-radius:8px; }
.store-page--noir .category-tabs__tab { color:#a1a1aa; border-color:rgba(255,255,255,.12); }

/* --- OSCURO / EDITORIAL — Magazine Dark -------------------------------- */
.store-page--magazine-dark { background:#1a1612 !important; color:#f5eedc; font-family:'Playfair Display',Georgia,serif; }
.store-page--magazine-dark .header { background:#1a1612; border-bottom:1px solid rgba(245,238,220,.1); }
.store-page--magazine-dark .banner__title { font-weight:400; font-style:italic; letter-spacing:.04em; color:#f5eedc; }
.store-page--magazine-dark .product-card { background:rgba(245,238,220,.03); border:1px solid rgba(245,238,220,.08); border-radius:4px; backdrop-filter:blur(6px); color:#f5eedc; }
.store-page--magazine-dark .product-card__name { font-family:'Playfair Display',serif; font-weight:400; font-size:17px; color:#f5eedc; }
.store-page--magazine-dark .product-card__price strong { color:#f5eedc; font-family:'Plus Jakarta Sans',sans-serif; font-weight:400; letter-spacing:.02em; }
.store-page--magazine-dark .product-card__add { background:#f5eedc; color:#1a1612; border:none; border-radius:2px; text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:600; }
.store-page--magazine-dark .category-tabs__tab.is-active { background:transparent; color:#f5eedc; border:none; border-bottom:1px solid #f5eedc; border-radius:0; }
.store-page--magazine-dark .category-tabs__tab { border:none; color:rgba(245,238,220,.55); }

/* --- OSCURO / PREMIUM — Luxury Gold (negro + oro, shimmer sutil) ------- */
.store-page--luxury-gold {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212,175,55,.15), transparent 60%),
    linear-gradient(180deg, #0a0806, #000) !important;
  background-attachment: fixed !important;
  color:#f5e6b8;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.store-page--luxury-gold .header { background:rgba(10,8,6,.9); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(212,175,55,.2); }
.store-page--luxury-gold .banner__title { background: linear-gradient(90deg, #d4af37, #f5e6b8, #d4af37); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-weight:600; letter-spacing:.05em; }
.store-page--luxury-gold .product-card { background:linear-gradient(160deg, rgba(212,175,55,.04), rgba(0,0,0,0)); border:1px solid rgba(212,175,55,.18); border-radius:12px; color:#f5e6b8; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease; }
.store-page--luxury-gold .product-card:hover { transform:translateY(-4px); border-color:rgba(212,175,55,.45); box-shadow: 0 12px 30px rgba(212,175,55,.12); }
.store-page--luxury-gold .product-card__name { font-weight:500; color:#f5e6b8; letter-spacing:.02em; }
.store-page--luxury-gold .product-card__price strong { background: linear-gradient(90deg, #d4af37, #f5e6b8); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-weight:700; }
.store-page--luxury-gold .product-card__add { background: linear-gradient(135deg, #d4af37, #a8842a); color:#0a0806; border:none; border-radius:6px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:12px; box-shadow: 0 4px 14px rgba(212,175,55,.25); }
.store-page--luxury-gold .category-tabs__tab.is-active { background: linear-gradient(135deg, #d4af37, #a8842a); color:#0a0806; border-color:#d4af37; border-radius:6px; }
.store-page--luxury-gold .category-tabs__tab { border:1px solid rgba(212,175,55,.2); color:rgba(245,230,184,.7); border-radius:6px; }

/* =====================================================================
   🎨 Themes v2 — DRAWERS, MODALES y POPUPS defensivos
   Los componentes flotantes (carrito, wishlist, modal producto, popup
   bienvenida, panel filtros) por default son oscuros (#0f1729). Los temas
   CLAROS e INTERMEDIOS necesitan fondo claro para que no se vean raros.
   Los temas OSCUROS (noir, magazine-dark, luxury-gold) ya heredan bien el
   default, solo tweak de acentos.
   ===================================================================== */

/* ——— 5 temas claros/intermedios — drawer carrito con JERARQUÍA VISUAL ——— */
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .cart-drawer {
  background: #fafbfc; color: #0f172a;
}
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .cart-drawer__head {
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
}
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .cart-drawer h3,
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .cart-drawer strong { color: #0f172a; }
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .cart-drawer__close {
  background: #f1f5f9; color: #475569;
}
/* Labels de sección "RESUMEN", "TUS DATOS", "MÉTODO DE PAGO" — legibles */
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .cart-section-label {
  color: #475569;
  font-weight: 800;
}
/* Separador "TUS DATOS" — línea VISIBLE sobre fondo claro */
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .cart-section-label--data {
  border-top: 1px solid #e2e8f0;
  padding-top: 24px;
  margin-top: 28px;
}
/* Item del carrito — card blanco contrastando con drawer gris-perla */
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .cart-item {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .cart-item__name { color: #0f172a; font-weight: 700; }
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .cart-drawer__empty { color: #64748b; }
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .cart-item__remove {
  color: #94a3b8;
  background: #f1f5f9;
  border-radius: 8px;
}
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .cart-item__remove:hover { color: #dc2626; background: #fee2e2; }
/* Botones +/- de qty en el cart item */
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .cart-item__qty button {
  background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0;
}
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .cart-item__qty button:hover { background: #e2e8f0; color: #0f172a; }
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .cart-item__qty span { color: #0f172a; }
/* Subtotal row */
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .cart-subtotal,
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) [data-cart-subtotal] { color: #475569; font-weight: 700; }

/* ——— 5 temas claros/intermedios — drawer wishlist BLANCO ——— */
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .wish-drawer {
  background: #ffffff; color: #0f172a;
}
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .wish-drawer__head {
  border-bottom: 1px solid #e2e8f0;
}
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .wish-drawer h3 { color: #0f172a; }

/* ——— 5 temas claros/intermedios — welcome popup BLANCO ——— */
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .welcome-popup__card {
  background: #ffffff; color: #0f172a; border: 1px solid #e2e8f0;
}
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .welcome-popup__card h2 { color: #0f172a; }
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .welcome-popup__close {
  background: #f1f5f9; color: #475569;
}

/* ——— 5 temas claros/intermedios — modal detalle producto BLANCO ——— */
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .pmodal__card {
  background: #ffffff; color: #0f172a;
}
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .pmodal__title,
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .pmodal__name { color: #0f172a; }
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .pmodal__desc { color: #475569; }
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .pmodal__close {
  background: #f1f5f9; color: #475569;
}

/* ——— 5 temas claros/intermedios — panel de filtros BLANCO ——— */
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .catalog-filter-panel {
  background: #ffffff; color: #0f172a; border: 1px solid #e2e8f0;
}
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .filter-chip {
  background: #f1f5f9; color: #334155; border-color: #e2e8f0;
}
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .filter-chip input:checked + span { color: var(--accent); }

/* ——— GLASSMORPH — drawers con vidrio esmerilado ——— */
.store-page--glassmorph .cart-drawer,
.store-page--glassmorph .wish-drawer {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  color: #1e1b4b;
}
.store-page--glassmorph .cart-drawer__head,
.store-page--glassmorph .wish-drawer__head { border-bottom: 1px solid rgba(255,255,255,0.5); }
.store-page--glassmorph .cart-drawer h3,
.store-page--glassmorph .cart-drawer strong,
.store-page--glassmorph .cart-item__name,
.store-page--glassmorph .wish-drawer h3 { color: #1e1b4b; }
.store-page--glassmorph .welcome-popup__card {
  background: rgba(255,255,255,0.9); backdrop-filter: blur(20px); color: #1e1b4b;
  border: 1px solid rgba(255,255,255,0.5);
}
.store-page--glassmorph .welcome-popup__card h2 { color: #1e1b4b; }
.store-page--glassmorph .pmodal__card { background: rgba(255,255,255,0.92); backdrop-filter: blur(20px); color: #1e1b4b; }
.store-page--glassmorph .pmodal__title,
.store-page--glassmorph .pmodal__name { color: #1e1b4b; }
.store-page--glassmorph .catalog-filter-panel {
  background: rgba(255,255,255,0.9); backdrop-filter: blur(20px); color: #1e1b4b;
  border: 1px solid rgba(255,255,255,0.5);
}

/* ——— MAGAZINE-DARK — tweaks drawer con tono carbón cálido ——— */
.store-page--magazine-dark .cart-drawer,
.store-page--magazine-dark .wish-drawer,
.store-page--magazine-dark .welcome-popup__card,
.store-page--magazine-dark .pmodal__card,
.store-page--magazine-dark .catalog-filter-panel { background: #1a1612; color: #f5eedc; }
.store-page--magazine-dark .cart-drawer__head,
.store-page--magazine-dark .wish-drawer__head { border-bottom: 1px solid rgba(245,238,220,0.1); }

/* ——— LUXURY-GOLD — tweaks drawer con acentos dorados ——— */
.store-page--luxury-gold .cart-drawer,
.store-page--luxury-gold .wish-drawer,
.store-page--luxury-gold .welcome-popup__card,
.store-page--luxury-gold .pmodal__card,
.store-page--luxury-gold .catalog-filter-panel { background: #0a0806; color: #f5e6b8; border: 1px solid rgba(212,175,55,0.15); }
.store-page--luxury-gold .cart-drawer__head,
.store-page--luxury-gold .wish-drawer__head { border-bottom: 1px solid rgba(212,175,55,0.2); }
.store-page--luxury-gold .welcome-popup__card h2 {
  background: linear-gradient(90deg, #d4af37, #f5e6b8);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ——— NOIR — ya usa default oscuro, solo asegurar tipografía fina ——— */
.store-page--noir .welcome-popup__card h2 { color: #fafafa; font-weight: 300; letter-spacing: .04em; }

/* ═══════════════════════════════════════════════
   CRM — Clientes, grupos, campañas (dashboard)
   ═══════════════════════════════════════════════ */

/* Stats cards de /dashboard/clientes */
.customer-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin: 16px 0 20px;
}
.customer-stat {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px; padding: 14px 16px;
}
.customer-stat__ico { font-size: 28px; line-height: 1; }
.customer-stat__num { display: block; font-size: 22px; font-weight: 800; color: #0f172a; line-height: 1; }
.customer-stat small { color: #64748b; font-size: 12px; font-weight: 600; }

/* Toolbar y filtros */
.customer-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.customer-filters {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px; background: #f8fafc; border-radius: 10px; margin-bottom: 16px;
}
.customer-search {
  flex: 1; min-width: 180px;
  padding: 10px 14px; border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px; font-size: 14px;
}
.customer-filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; background: #fff; border: 1px solid #e2e8f0;
  border-radius: 999px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.customer-filter-chip:has(input:checked) {
  background: var(--color-primary, #6366f1); color: #fff; border-color: var(--color-primary, #6366f1);
}
.customer-filter-chip input { display: none; }

/* Lista de clientes */
.customer-list { display: grid; gap: 10px; }
.customer-card {
  display: grid; grid-template-columns: 48px 1fr auto;
  gap: 14px; align-items: center;
  padding: 14px; background: #fff;
  border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.customer-card:hover { border-color: var(--color-primary, #6366f1); box-shadow: 0 2px 8px rgba(15,23,42,.06); }
.customer-card__avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #ec4899);
  color: #fff; font-weight: 800; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.customer-card__info strong { display: block; color: #0f172a; font-size: 14px; }
.customer-card__phone { color: #64748b; font-size: 13px; display: block; margin: 2px 0; }
.customer-card__meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: #475569; }
.customer-card__meta strong { color: #0f172a; }
.customer-card__actions { display: flex; gap: 6px; }
.btn--wa { background: #25d366; color: #fff; border-color: #25d366; }
.btn--wa:hover { background: #128c7e; border-color: #128c7e; color: #fff; }

/* Grupos */
.group-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 16px; }
.group-card {
  display: flex; gap: 14px; padding: 16px;
  background: #fff; border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px;
  align-items: flex-start;
}
.group-card__ico { font-size: 32px; flex-shrink: 0; }
.group-card__body { flex: 1; min-width: 0; }
.group-card__body h3 { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.group-card__body p { margin: 0 0 8px; font-size: 12px; color: #64748b; }
.group-card__count { font-size: 12px; color: #475569; }
.group-card__count strong { color: #0f172a; font-size: 14px; }
.group-card__actions { display: flex; flex-direction: column; gap: 4px; }

.group-form { display: grid; grid-template-columns: 1fr 120px; gap: 12px; }
.group-form .form__col-2 { grid-column: 1 / -1; }

.group-checkboxes { display: grid; gap: 6px; }
.group-checkbox {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 8px;
  cursor: pointer; transition: background .15s;
}
.group-checkbox:hover { background: #f1f5f9; }
.group-checkbox:has(input:checked) {
  background: color-mix(in srgb, var(--color-primary, #6366f1) 10%, #fff);
  border-color: var(--color-primary, #6366f1);
}

/* Group member picker */
.group-member-picker {
  max-height: 400px; overflow-y: auto;
  border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px;
}
.group-member-all {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; background: #f8fafc; border-radius: 6px;
  font-weight: 700; cursor: pointer; margin-bottom: 8px;
}
.group-member-list { display: grid; gap: 4px; }
.group-member-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
}
.group-member-opt:hover { background: #f8fafc; }
.group-member-opt span { display: flex; flex-direction: column; }
.group-member-opt small { color: #64748b; font-size: 11px; }

/* Campañas */
.campaigns-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
.campaign-card {
  background: #fff; border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s;
}
.campaign-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,23,42,.08); }
.campaign-card--off { opacity: 0.65; }
.campaign-card__img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #f1f5f9;
}
.campaign-card__img--empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 48px; color: #cbd5e1;
}
.campaign-card__body { padding: 14px; flex: 1; }
.campaign-card__status { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.campaign-card__body h3 { margin: 0 0 6px; font-size: 15px; }
.campaign-card__msg { margin: 0 0 8px; font-size: 12px; color: #475569; line-height: 1.4; }
.campaign-card__meta { display: flex; gap: 12px; font-size: 11px; color: #94a3b8; }
.campaign-card__actions { display: flex; gap: 6px; padding: 0 14px 14px; }
.campaign-card__actions .btn { flex: 1; }
.campaign-card__actions .btn--outline { flex: 0; }

/* Editor de campaña */
.campaign-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campaign-form .form__col-2 { grid-column: 1 / -1; }

/* Detail view (envío manual) */
.campaign-preview__header {
  display: flex; gap: 14px; align-items: center;
}
.campaign-preview__img {
  width: 80px; height: 80px; border-radius: 10px; object-fit: cover;
}

.campaign-link-box {
  display: flex; gap: 8px; margin: 8px 0;
}
.campaign-link-box input {
  flex: 1; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 8px;
  background: #f8fafc; font-family: monospace; font-size: 13px;
  cursor: pointer;
}

.campaign-message-editor {
  width: 100%; padding: 14px; border: 1.5px solid #cbd5e1; border-radius: 10px;
  font-size: 14px; line-height: 1.5; resize: vertical;
  font-family: inherit;
}
.campaign-message-editor:focus { border-color: var(--color-primary, #6366f1); outline: none; }

.campaign-phones-box { margin-top: 10px; }
.campaign-phones-box textarea {
  width: 100%; padding: 12px; border: 1px solid #e2e8f0; border-radius: 8px;
  background: #f8fafc; font-family: monospace; font-size: 12px;
  color: #475569; resize: vertical; cursor: pointer;
}
.campaign-phones-box .btn { margin-top: 8px; }

.campaign-no-phones {
  padding: 20px; background: #fef2f2; border: 1px solid #fecaca;
  border-radius: 10px;
}
.campaign-no-phones p:first-child { color: #991b1b; margin: 0 0 8px; }

.campaign-howto {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border: 1px solid #86efac;
}
.campaign-howto ol { padding-left: 20px; line-height: 1.8; }
.campaign-howto li { margin: 0; }

/* Landing pública de promo */
.promo-page {
  min-height: 100vh; background: #fafbfc;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.promo-page__head {
  background: #fff; padding: 14px 20px; border-bottom: 1px solid #e2e8f0;
  position: sticky; top: 0; z-index: 5;
}
.promo-page__brand {
  display: flex; align-items: center; gap: 10px;
  color: inherit; text-decoration: none; font-weight: 700;
  max-width: 800px; margin: 0 auto;
}
.promo-page__brand img {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
}

.promo-page__hero {
  max-width: 800px; margin: 0 auto;
  aspect-ratio: 16/9; overflow: hidden; background: #f1f5f9;
}
.promo-page__hero img { width: 100%; height: 100%; object-fit: cover; }

.promo-page__content {
  max-width: 700px; margin: 0 auto; padding: 30px 20px;
}
.promo-page__title {
  font-size: clamp(26px, 5vw, 40px); font-weight: 800;
  color: #0f172a; margin: 0 0 12px; line-height: 1.15;
}
.promo-page__deadline {
  display: inline-block; padding: 6px 14px;
  background: #fef3c7; color: #92400e; border-radius: 999px;
  font-size: 13px; font-weight: 700; margin-bottom: 16px;
}
.promo-page__message {
  font-size: 16px; line-height: 1.6; color: #334155;
  margin-bottom: 24px; white-space: pre-line;
}

.promo-page__product {
  display: grid; grid-template-columns: 140px 1fr; gap: 16px;
  padding: 16px; background: #fff;
  border: 2px solid var(--accent, #6366f1); border-radius: 14px;
  margin-bottom: 24px;
}
.promo-page__product img { width: 140px; height: 140px; object-fit: cover; border-radius: 10px; }
.promo-page__product h3 { margin: 0 0 4px; font-size: 18px; color: #0f172a; }
.promo-page__product-price { font-size: 24px; font-weight: 800; color: var(--accent, #6366f1); margin: 4px 0; }
.promo-page__product-price s { color: #94a3b8; font-weight: 400; font-size: 16px; margin-left: 8px; }

.promo-page__ctas { display: grid; gap: 10px; }
.promo-page__cta-main { padding: 16px; font-size: 16px; font-weight: 800; }
.promo-page__cta-alt { padding: 14px; font-size: 15px; }

.promo-page__expired {
  text-align: center; padding: 60px 20px; max-width: 500px; margin: 0 auto;
}
.promo-page__expired-ico { font-size: 64px; margin-bottom: 12px; }
.promo-page__expired h2 { color: #0f172a; margin: 0 0 8px; }
.promo-page__expired p { color: #64748b; margin-bottom: 20px; }

.promo-page__footer {
  text-align: center; padding: 30px 20px; color: #64748b;
  font-size: 13px; border-top: 1px solid #e2e8f0;
}
.promo-page__footer a { color: inherit; font-weight: 700; }

/* Adaptación de la promo landing a temas oscuros */
:is(.store-page--noir, .store-page--dark, .store-page--magazine-dark, .store-page--luxury-gold).promo-page {
  background: transparent !important;
}
:is(.store-page--noir, .store-page--dark, .store-page--magazine-dark, .store-page--luxury-gold) .promo-page__head {
  background: #0a0a0a;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
:is(.store-page--noir, .store-page--dark, .store-page--magazine-dark, .store-page--luxury-gold) .promo-page__title {
  color: #fafafa;
}
:is(.store-page--noir, .store-page--dark, .store-page--magazine-dark, .store-page--luxury-gold) .promo-page__message {
  color: #d1d5db;
}
:is(.store-page--noir, .store-page--dark, .store-page--magazine-dark, .store-page--luxury-gold) .promo-page__product {
  background: #0f0f0f;
  border-color: var(--accent, #6366f1);
}
:is(.store-page--noir, .store-page--dark, .store-page--magazine-dark, .store-page--luxury-gold) .promo-page__product h3 {
  color: #fafafa;
}
:is(.store-page--noir, .store-page--dark, .store-page--magazine-dark, .store-page--luxury-gold) .promo-page__product p.muted {
  color: #9ca3af;
}
:is(.store-page--noir, .store-page--dark, .store-page--magazine-dark, .store-page--luxury-gold) .promo-page__expired h2 {
  color: #fafafa;
}
:is(.store-page--noir, .store-page--dark, .store-page--magazine-dark, .store-page--luxury-gold) .promo-page__expired p {
  color: #9ca3af;
}
:is(.store-page--noir, .store-page--dark, .store-page--magazine-dark, .store-page--luxury-gold) .promo-page__footer {
  border-top-color: rgba(255, 255, 255, 0.08);
  color: #9ca3af;
}

/* Solución contraste precio modal producto catálogo en temas oscuros */
:is(.store-page--noir, .store-page--dark, .store-page--magazine-dark, .store-page--luxury-gold) .pmodal__price strong {
  color: #fafafa !important;
}

/* Habeas data checkbox en checkout */
.cart-optin {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px; background: #f8fafc; border-radius: 10px;
  font-size: 13px; line-height: 1.4; cursor: pointer;
  margin-top: 8px;
}
.cart-optin input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
.cart-optin small { display: block; color: #64748b; font-size: 11px; margin-top: 2px; }
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .cart-optin {
  color: #334155;
}
:is(.store-page--noir, .store-page--magazine-dark, .store-page--luxury-gold) .cart-optin {
  background: rgba(255,255,255,0.04); color: inherit;
}

/* Feature flag UI (superadmin integrations) */
.int-flag-box { border: 2px dashed #fbbf24; background: #fffbeb; }
.int-flag-toggle {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; background: #fff; border-radius: 8px;
  cursor: pointer; margin-bottom: 16px;
}
.int-flag-toggle input { margin-top: 2px; }
.int-flag-toggle__label { display: flex; flex-direction: column; }
.int-flag-toggle__label small { color: #64748b; margin-top: 2px; }

.int-flag-plans {
  padding: 14px; background: #fff; border-radius: 8px; margin-bottom: 12px;
}
.int-flag-plan {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; margin: 4px; background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 999px; font-size: 13px; cursor: pointer;
}
.int-flag-plan:has(input:checked) {
  background: color-mix(in srgb, var(--color-primary, #6366f1) 15%, #fff);
  border-color: var(--color-primary, #6366f1);
}

.int-flag-templates { padding: 14px; background: #fff; border-radius: 8px; }
.int-flag-template {
  display: grid; grid-template-columns: 1fr 2fr; gap: 12px; align-items: center;
  margin-bottom: 10px;
}
.int-flag-template code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: 12px; }
.int-flag-template input {
  padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 6px;
  font-family: monospace; font-size: 12px;
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .campaign-form { grid-template-columns: 1fr; }
  .group-form { grid-template-columns: 1fr; }
  .customer-card { grid-template-columns: 40px 1fr; }
  .customer-card__actions { grid-column: 1 / -1; margin-top: 8px; }
  .promo-page__product { grid-template-columns: 1fr; }
  .promo-page__product img { width: 100%; aspect-ratio: 16/9; height: auto; }
  .int-flag-template { grid-template-columns: 1fr; gap: 6px; }
  .campaign-link-box { flex-direction: column; }
  .campaign-link-box .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════
   Order detail — timeline y acciones
   ═══════════════════════════════════════════════ */
.order-detail-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; margin-top: 16px;
}
@media (max-width: 900px) {
  .order-detail-grid { grid-template-columns: 1fr; }
}

.order-customer { display: grid; gap: 6px; font-size: 14px; }
.order-customer strong { color: #0f172a; }

.order-items { display: grid; gap: 8px; }
.order-item-row {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
}
.order-item-qty { color: #64748b; font-weight: 700; }
.order-item-name { color: #0f172a; }
.order-item-line { color: var(--color-primary, #6366f1); font-weight: 700; }
.order-total-row {
  display: flex; justify-content: space-between;
  padding: 14px 0 4px; font-size: 18px; color: #0f172a;
  border-top: 2px solid #e2e8f0;
}

.order-actions { display: flex; flex-direction: column; gap: 10px; }
.order-actions h3 { margin-top: 0; }
.order-actions form { display: inline-block; }
.order-cancel-box {
  background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 14px;
}
.order-cancel-box > summary { cursor: pointer; list-style: none; }
.order-cancel-box > summary::-webkit-details-marker { display: none; }
.order-cancel-box textarea {
  width: 100%; padding: 10px; border: 1px solid #fca5a5; border-radius: 6px;
  font-size: 14px; font-family: inherit;
}

.order-cancelled {
  background: #fef2f2; border: 1px solid #fca5a5;
}
.order-cancelled h3 { color: #991b1b; margin-top: 0; }

/* Timeline vertical */
.order-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.order-timeline::before {
  content: ''; position: absolute;
  top: 14px; bottom: 14px; left: 18px;
  width: 2px; background: #e2e8f0;
}
.order-timeline__item {
  position: relative; display: flex; gap: 14px;
  padding: 10px 0;
}
.order-timeline__ico {
  flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; border: 2px solid #e2e8f0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; z-index: 1;
  position: relative;
}
.order-timeline__body { flex: 1; }
.order-timeline__body strong {
  display: block; color: #0f172a; font-size: 14px; margin-bottom: 2px;
}
.order-timeline__body p { margin: 2px 0; color: #475569; font-size: 13px; }
.order-timeline__meta { color: #94a3b8; font-size: 11px; display: block; margin-top: 4px; }

/* ═══════════════════════════════════════════════
   ADDONS — Dashboard + cards + quota bars
   ═══════════════════════════════════════════════ */

.addons-usage { margin: 16px 0 24px; }
.addons-usage h2 { margin: 0 0 12px; font-size: 18px; }

.quota-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.quota-card {
  background: #fff; border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.quota-card__head {
  display: flex; align-items: center; gap: 8px;
}
.quota-card__ico { font-size: 20px; }
.quota-card__label { flex: 1; font-size: 12px; color: #64748b; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.quota-card__value { font-size: 14px; color: #0f172a; }
.quota-bar {
  height: 8px; background: #f1f5f9; border-radius: 999px; overflow: hidden;
}
.quota-bar__fill {
  height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a);
  transition: width .3s;
}
.quota-bar--warn .quota-bar__fill { background: linear-gradient(90deg, #f59e0b, #d97706); }
.quota-bar--critical .quota-bar__fill { background: linear-gradient(90deg, #ef4444, #dc2626); }
.quota-bar--empty .quota-bar__fill { background: #cbd5e1; width: 0 !important; }
.quota-card__cta {
  font-size: 12px; font-weight: 700;
  color: var(--color-primary, #6366f1);
  text-decoration: none; margin-top: 2px;
}
.quota-card__cta:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════
   Checkout fields config (store_form)
   ═══════════════════════════════════════════════ */
.checkout-fields-config { margin-top: 6px; }
.cf-list { display: grid; gap: 10px; }
.cf-row {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
}
.cf-row--extra { background: #fefce8; border-color: #fde68a; }
.cf-row__info {
  display: flex; gap: 12px; align-items: center; flex: 1; min-width: 0;
}
.cf-row__ico { font-size: 22px; flex-shrink: 0; }
.cf-row__info strong { display: block; color: #0f172a; font-size: 14px; }
.cf-row__info small { display: block; color: #64748b; font-size: 12px; line-height: 1.3; }
.cf-row__controls { display: flex; gap: 12px; flex-shrink: 0; }
.cf-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: #475569; cursor: pointer;
  padding: 6px 10px; background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 8px;
  user-select: none;
}
.cf-toggle input { cursor: pointer; margin: 0; }
.cf-toggle:has(input:checked) {
  background: color-mix(in srgb, var(--color-primary, #6366f1) 10%, #fff);
  border-color: var(--color-primary, #6366f1);
  color: #0f172a;
}
.cf-toggle--required:has(input:checked) {
  background: #fef3c7; border-color: #f59e0b; color: #92400e;
}
.cf-toggle:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }

@media (max-width: 640px) {
  .cf-row { flex-direction: column; align-items: flex-start; }
  .cf-row__controls { width: 100%; }
  .cf-toggle { flex: 1; justify-content: center; }
}

/* Textarea dentro de cart-input (para campo "notas") */
.cart-input--notes { align-items: flex-start; padding: 10px 14px; }
.cart-input--notes textarea {
  background: transparent; border: 0; width: 100%;
  font-family: inherit; font-size: 14px; color: inherit;
  resize: vertical; min-height: 40px; outline: none;
}

/* ═══════════════════════════════════════════════
   Promo bar — overrides por tema (v2)
   Para que el banner anuncios NO se vea desentonado con cada tema
   ═══════════════════════════════════════════════ */

/* CLAROS */
.store-page--pure .promo-bar {
  background: linear-gradient(135deg, #0f172a, #334155);
  color: #fff;
}
.store-page--magazine-light .promo-bar {
  background: #1f1a14;
  color: #fbf8f3;
  font-family: 'Playfair Display', Georgia, serif;
  text-transform: uppercase; letter-spacing: .14em; font-size: 12px;
}
.store-page--aurora-light .promo-bar {
  background: linear-gradient(90deg, var(--accent, #a855f7), #ec4899, var(--accent, #a855f7));
  color: #fff;
}

/* INTERMEDIOS */
.store-page--warm .promo-bar {
  background: linear-gradient(135deg, #7c5a2b, #5c4520);
  color: #fefbf5;
}
.store-page--botanical .promo-bar {
  background: #3d6b3d;
  color: #f5f8f3;
  font-family: 'Playfair Display', serif;
}
.store-page--glassmorph .promo-bar {
  background: rgba(30, 27, 75, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
}

/* OSCUROS */
.store-page--noir .promo-bar {
  background: #fafafa;
  color: #000;
  font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; font-size: 12px;
}
.store-page--magazine-dark .promo-bar {
  background: rgba(245,238,220,0.1);
  color: #f5eedc;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  border: 1px solid rgba(245,238,220,0.2);
}
.store-page--luxury-gold .promo-bar {
  background: linear-gradient(90deg, #d4af37, #a8842a, #d4af37);
  color: #0a0806;
  font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}

/* LEGACY — faltaba override para estos 3 temas; ahora coinciden con su paleta */
.store-page--intimate .promo-bar {
  background: linear-gradient(90deg, #9f1239, #be123c, #9f1239);
  color: #fff;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic; letter-spacing: .06em;
}
.store-page--express .promo-bar {
  background: linear-gradient(90deg, #1d4ed8, #3b82f6);
  color: #fff;
  font-weight: 700;
  border-radius: 0;
}
.store-page--minimal .promo-bar {
  background: #0f172a;
  color: #fff;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 12px;
  border-radius: 0;
}

/* ═══════════════════════════════════════════════
   WIZARDS (tienda + cupón) — layout con preview live
   ═══════════════════════════════════════════════ */
.wizard-layout {
  display: grid; grid-template-columns: 1.1fr 340px; gap: 24px;
  align-items: start; margin-top: 16px;
}
.wizard-col { min-width: 0; }
.wizard-preview { min-width: 0; }
.wizard-preview__sticky { position: sticky; top: 20px; }
.wizard-preview h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: #64748b; margin: 0 0 10px;
}

/* Stepper */
.wiz-steps {
  display: flex; gap: 8px; justify-content: center;
  padding: 16px 0 22px; border-bottom: 1px solid #e2e8f0; margin-bottom: 22px;
}
/* Scoped a .wiz-steps para no colisionar con el product_wizard,
   que usa .wiz-step como contenedor de panel full-width. */
.wiz-steps > .wiz-step {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #f1f5f9; color: #94a3b8;
  font-size: 13px; font-weight: 800;
  position: relative;
  transition: all .2s;
}
.wiz-steps > .wiz-step:not(:last-child)::after {
  content: ''; position: absolute; left: 100%; top: 50%;
  width: 8px; height: 2px; background: #e2e8f0;
  transform: translateY(-50%);
}
.wiz-steps > .wiz-step.is-active { background: #6366f1; color: #fff; transform: scale(1.1); }
.wiz-steps > .wiz-step.is-done { background: #22c55e; color: #fff; }
.wiz-steps > .wiz-step.is-done::before { content: '✓'; font-size: 14px; }
.wiz-steps > .wiz-step.is-done[data-step-label] { font-size: 0; }
.wiz-steps > .wiz-step.is-done::before { font-size: 14px; }

/* Paneles */
.store-wizard {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  padding: 22px 24px;
}
.wiz-step-panel { display: none; }
.wiz-step-panel.is-active { display: block; animation: wiz-fade .3s ease; }
@keyframes wiz-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.wiz-step-panel h2 {
  margin: 0 0 16px; font-size: 18px; color: #0f172a;
}
.wiz-step-panel label {
  display: block; margin-bottom: 16px;
  font-size: 13px; font-weight: 600; color: #334155;
}
.wiz-step-panel label > small { font-weight: 400; color: #64748b; }
.wiz-step-panel input,
.wiz-step-panel select,
.wiz-step-panel textarea {
  width: 100%; padding: 10px 12px; margin-top: 4px;
  border: 1px solid #cbd5e1; border-radius: 8px;
  font-size: 14px; font-family: inherit;
  box-sizing: border-box;
}
.wiz-step-panel input:focus,
.wiz-step-panel select:focus,
.wiz-step-panel textarea:focus {
  border-color: #6366f1; outline: none;
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.wiz-step-panel small {
  display: block; margin-top: 4px; color: #64748b; font-size: 12px;
}
.wiz-actions {
  display: flex; gap: 10px; margin-top: 20px;
  padding-top: 16px; border-top: 1px solid #f1f5f9;
}
.wiz-actions [data-prev] { flex: 0 0 auto; }
.wiz-actions [data-next], .wiz-actions [type="submit"] { flex: 1; }

/* Slug con prefix */
.wiz-slug-row {
  display: flex; align-items: stretch; margin-top: 4px;
  border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden;
}
.wiz-slug-row:focus-within { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.wiz-slug-prefix {
  background: #f1f5f9; color: #64748b;
  padding: 10px 12px; font-family: ui-monospace, monospace; font-size: 13px;
  border-right: 1px solid #cbd5e1;
}
.wiz-slug-row input {
  border: 0 !important; margin: 0 !important; border-radius: 0 !important;
  font-family: ui-monospace, monospace;
}
.wiz-slug-row input:focus { box-shadow: none !important; }

/* Hero del WhatsApp step */
.wiz-wa-hero {
  padding: 14px 16px; background: linear-gradient(135deg,#f0fdf4,#dcfce7);
  border: 1px solid #86efac; border-radius: 10px; margin-bottom: 16px;
  color: #14532d; font-size: 14px;
}

/* Preview del teléfono */
.wiz-phone {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 22px;
  overflow: hidden; box-shadow: 0 10px 30px rgba(15,23,42,.08);
}
.wiz-phone__header {
  padding: 16px; color: #fff;
  display: flex; align-items: center; gap: 12px;
}
.wiz-phone__logo {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.25); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px;
  flex-shrink: 0;
}
.wiz-phone__header strong { display: block; font-size: 16px; }
.wiz-phone__header small { display: block; font-size: 11px; opacity: .85; }
.wiz-phone__body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.wiz-phone__url,
.wiz-phone__wa {
  padding: 8px 10px; background: #f8fafc; border-radius: 8px;
  font-size: 12px; color: #475569; font-family: ui-monospace, monospace;
}
.wiz-phone__products {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0;
}
.wiz-phone__placeholder {
  aspect-ratio: 1; background: #f1f5f9; border-radius: 8px;
}
.wiz-phone__cta {
  padding: 10px; border: 0; color: #fff; border-radius: 10px;
  font-size: 13px; font-weight: 700; cursor: default;
}

/* Coupon preview */
.cp-preview {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 2px dashed #f59e0b;
  border-radius: 14px; padding: 20px;
  text-align: center; position: relative;
}
.cp-preview__ribbon {
  position: absolute; top: 10px; left: 10px;
  background: #f59e0b; color: #fff;
  padding: 2px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
}
.cp-preview__code {
  font-family: ui-monospace, monospace;
  font-size: 22px; font-weight: 800; color: #78350f;
  letter-spacing: .08em; margin: 14px 0 10px;
  padding: 8px 14px; background: rgba(255,255,255,.7);
  border-radius: 8px; border: 1px dashed #f59e0b;
}
.cp-preview__value {
  font-size: 28px; font-weight: 800; color: #b45309;
  margin: 6px 0;
}
.cp-preview__meta {
  font-size: 12px; color: #78350f; font-weight: 600;
}

/* Selector de tipo (radio cards) */
.cp-type-picker {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px;
}
.cp-type-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px; background: #fff; border: 2px solid #e2e8f0;
  border-radius: 10px; cursor: pointer; text-align: center;
  transition: all .15s;
  font-weight: 400 !important;
}
.cp-type-card:hover { border-color: #cbd5e1; }
.cp-type-card.is-active {
  border-color: #6366f1;
  background: color-mix(in srgb, #6366f1 8%, #fff);
}
.cp-type-card input { position: absolute; opacity: 0; pointer-events: none; }
.cp-type-card__ico {
  font-size: 28px; font-weight: 800; line-height: 1;
  color: #6366f1;
}
.cp-type-card strong { color: #0f172a; font-size: 14px; }
.cp-type-card small { color: #64748b; font-size: 11px; }

.cp-value-row {
  display: flex; align-items: stretch; margin-top: 4px;
  border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden;
}
.cp-value-row:focus-within { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.cp-value-suffix {
  background: #f1f5f9; color: #0f172a;
  padding: 10px 16px; font-weight: 800; font-size: 16px;
  border-right: 1px solid #cbd5e1;
}
.cp-value-row input {
  border: 0 !important; margin: 0 !important; border-radius: 0 !important;
  font-weight: 700;
}

.cp-toggle {
  display: flex !important; gap: 10px; align-items: center;
  padding: 12px; background: #f0fdf4; border: 1px solid #86efac;
  border-radius: 10px; cursor: pointer;
  margin-bottom: 0 !important;
}
.cp-toggle input { width: auto !important; margin: 0 !important; }
.cp-toggle strong { color: #14532d; }
.cp-toggle small { color: #166534; }

/* Mobile: layout en 1 columna */
@media (max-width: 900px) {
  .wizard-layout { grid-template-columns: 1fr; }
  .wizard-preview__sticky { position: static; }
}

/* ═══════════════════════════════════════════════
   Storefront toast (reemplaza window.alert en el cart)
   ═══════════════════════════════════════════════ */
.sf-toast-stack {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 99999; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
  max-width: 92vw;
}
.sf-toast {
  background: #0f172a; color: #fff;
  padding: 12px 18px; border-radius: 10px;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(-12px);
  transition: opacity .2s, transform .25s;
  max-width: min(480px, 92vw);
  pointer-events: auto;
}
.sf-toast.is-visible { opacity: 1; transform: translateY(0); }
.sf-toast--warn    { background: #f59e0b; color: #fff; }
.sf-toast--error   { background: #dc2626; color: #fff; }
.sf-toast--success { background: #16a34a; color: #fff; }
/* Pulso sutil cuando el mismo toast se repite (dedup) */
@keyframes sf-toast-pulse {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(0) scale(1.04); }
  100% { transform: translateY(0) scale(1); }
}
.sf-toast.is-pulse { animation: sf-toast-pulse .28s ease; }

/* Botón "+" cuando llega al tope de stock o producto agotado.
   Evita el click-spam y comunica visualmente el estado. */
.product-card__add[disabled],
.product-card__add.is-at-cap {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.4);
}
.product-card__add.is-at-cap::after {
  content: ''; /* placeholder, el "+" permanece como label */
}

/* ═══════════════════════════════════════════════
   Campaign INSIGHTS panel (análisis de ventas → ideas)
   ═══════════════════════════════════════════════ */
.campaign-insights {
  background: linear-gradient(135deg, #ecfeff, #dbeafe);
  border: 2px solid #7dd3fc;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 12px;
}
.campaign-insights__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; flex-wrap: wrap;
}
.campaign-insights__head strong { display: block; color: #0c4a6e; font-size: 15px; }
.campaign-insights__head small { display: block; color: #0369a1; font-size: 12px; line-height: 1.4; margin-top: 2px; }

.campaign-insights__results { margin-top: 16px; }
.campaign-insights__loading {
  text-align: center; padding: 20px; color: #0369a1;
  font-weight: 600; font-size: 14px;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

.campaign-insights__summary {
  background: rgba(255,255,255,0.8); border-radius: 10px; padding: 14px 16px;
  margin-bottom: 14px;
}
.campaign-insights__summary pre {
  margin: 0; font-family: inherit; font-size: 13px; line-height: 1.6;
  white-space: pre-wrap; color: #0c4a6e;
}
.campaign-insights__source {
  display: inline-block; margin-top: 8px; padding: 3px 10px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
}
.campaign-insights__source--ai      { background: #f3e8ff; color: #6b21a8; }
.campaign-insights__source--manual  { background: #fef3c7; color: #92400e; }

.campaign-insights__ideas { display: grid; gap: 10px; }
.campaign-insights__ideas > strong { color: #0c4a6e; font-size: 14px; margin-bottom: 2px; }

.idea-card {
  background: #fff; border: 1px solid #bae6fd;
  border-radius: 10px; padding: 14px 16px;
}
.idea-card__header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; margin-bottom: 8px; flex-wrap: wrap;
}
.idea-card__header h4 {
  margin: 0; font-size: 15px; color: #0f172a; flex: 1; min-width: 0;
}
.idea-card__message {
  margin: 0 0 8px; padding: 10px 12px;
  background: #f8fafc; border-radius: 6px;
  font-family: inherit; font-size: 13px; line-height: 1.5;
  white-space: pre-wrap; color: #334155;
}
.idea-card__why {
  display: block; color: #64748b; font-size: 12px; line-height: 1.4;
}

.campaign-insights__error {
  padding: 12px 14px; background: #fef2f2; color: #991b1b;
  border: 1px solid #fecaca; border-radius: 8px; font-size: 13px;
}

@media (max-width: 640px) {
  .campaign-insights__head { flex-direction: column; }
  .campaign-insights__head .btn { width: 100%; }
  .idea-card__header { flex-direction: column; }
  .idea-card__header .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════
   Campaign AI box (auto-generar con IA)
   ═══════════════════════════════════════════════ */
.campaign-ai-box {
  background: linear-gradient(135deg, #faf5ff, #fdf2f8);
  border: 2px dashed #d8b4fe;
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 8px;
}
.campaign-ai-box__head {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px;
}
.campaign-ai-box__head strong { display: block; color: #6b21a8; font-size: 15px; }
.campaign-ai-box__head small { display: block; font-size: 12px; line-height: 1.4; color: #7e22ce; }
.campaign-ai-box__row {
  display: flex; gap: 8px; align-items: stretch;
}
.campaign-ai-box__row input {
  flex: 1; min-width: 0;
  padding: 10px 12px; border: 1px solid #d8b4fe; border-radius: 8px;
  background: #fff; font-size: 14px;
}
.campaign-ai-box__row input:focus { border-color: #a855f7; outline: none; box-shadow: 0 0 0 3px rgba(168,85,247,.15); }
.campaign-ai-box__row button { flex-shrink: 0; white-space: nowrap; }
.campaign-ai-box__status {
  margin-top: 8px; padding: 8px 10px; border-radius: 6px;
  background: rgba(255,255,255,0.6); font-size: 12px; font-weight: 600;
}

/* IA box dentro del modal quick-product */
.qp-ai-box {
  background: linear-gradient(135deg, #faf5ff, #fdf2f8);
  border: 1px dashed #d8b4fe;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.qp-ai-box strong { color: #6b21a8; font-size: 13px; }
.qp-ai-box small { display: block; font-size: 11px; line-height: 1.3; margin-bottom: 6px; }
.qp-ai-row {
  display: flex; gap: 6px; margin-top: 6px;
}
.qp-ai-row input {
  flex: 1; min-width: 0;
  padding: 8px 10px; border: 1px solid #d8b4fe; border-radius: 6px;
  background: #fff; font-size: 13px;
}
.qp-ai-status {
  margin-top: 6px; padding: 6px 8px; border-radius: 5px;
  background: rgba(255,255,255,0.7); font-size: 12px; font-weight: 600;
}

@media (max-width: 640px) {
  .campaign-ai-box__row { flex-direction: column; }
  .campaign-ai-box__row button { width: 100%; }
}

/* ═══════════════════════════════════════════════
   Quick product creator (campaign form)
   ═══════════════════════════════════════════════ */
.campaign-product-field { display: block; }
.campaign-product-row {
  display: flex; gap: 8px; align-items: stretch;
}
.campaign-product-row select { flex: 1; min-width: 0; }
.campaign-product-row button { white-space: nowrap; flex-shrink: 0; }

.quick-product-modal {
  border: 0; padding: 0; background: transparent;
  max-width: 480px; width: 92vw; border-radius: 16px;
}
.quick-product-modal::backdrop { background: rgba(15,23,42,.7); backdrop-filter: blur(4px); }
.quick-product-modal__card { background: #fff; border-radius: 16px; overflow: hidden; }
.quick-product-modal__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid #e2e8f0;
}
.quick-product-modal__head h3 { margin: 0; font-size: 17px; }
.quick-product-modal__close {
  width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: #f1f5f9; color: #64748b; font-size: 20px; cursor: pointer;
}
.quick-product-modal__body { padding: 18px 20px; }
.quick-product-modal__body label {
  display: grid; gap: 4px; margin-bottom: 12px;
  font-size: 13px; font-weight: 600; color: #475569;
}
.quick-product-modal__body input,
.quick-product-modal__body textarea {
  padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px;
  font-size: 14px; font-family: inherit; box-sizing: border-box;
}
.quick-product-modal__actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid #f1f5f9;
}
.quick-product-modal__error {
  margin-top: 10px; padding: 10px 12px;
  background: #fef2f2; color: #991b1b;
  border: 1px solid #fecaca; border-radius: 8px; font-size: 13px;
}

/* ═══════════════════════════════════════════════
   Super admin — Compras de addons (activación manual)
   ═══════════════════════════════════════════════ */
.sidebar-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px;
  background: #f59e0b; color: #fff;
  border-radius: 999px;
  font-size: 10px; font-weight: 800;
  margin-left: auto;
}

.purchases-pending h2 {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px;
}
.purchases-empty {
  text-align: center; padding: 40px 20px;
}

.purchases-list { display: grid; gap: 10px; }
.purchase-card {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px;
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  border-radius: 12px;
}
.purchase-card--pending { animation: purchase-pulse 2.5s ease-in-out infinite; }
@keyframes purchase-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(253,230,138,0); }
  50%      { box-shadow: 0 0 0 6px rgba(253,230,138,.3); }
}
.purchase-card__ico {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #fde68a;
  font-size: 22px; flex-shrink: 0;
}
.purchase-card__body { flex: 1; min-width: 0; }
.purchase-card__title { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.purchase-card__title strong { color: #78350f; font-size: 15px; }
.purchase-card__meta {
  font-size: 12px; color: #92400e; display: flex; gap: 6px; flex-wrap: wrap;
}
.purchase-card__meta strong { color: #78350f; }
.purchase-card__customer {
  margin-top: 6px; font-size: 13px; color: #78350f;
}
.purchase-card__customer strong { color: #1e3a8a; }
.purchase-card__actions {
  display: flex; gap: 6px; align-items: flex-start;
}

.purchase-reject {
  position: relative;
}
.purchase-reject > summary { list-style: none; cursor: pointer; }
.purchase-reject > summary::-webkit-details-marker { display: none; }
.purchase-reject__form {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 10;
  background: #fff; border: 1px solid #fecaca; border-radius: 10px;
  padding: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.15);
  display: grid; gap: 8px; width: 280px;
}
.purchase-reject__form label { display: grid; gap: 4px; font-size: 12px; color: #991b1b; }
.purchase-reject__form input {
  padding: 8px 10px; border: 1px solid #fecaca; border-radius: 6px; font-size: 13px;
}

/* Tabla historial */
.purchases-table-wrap { overflow-x: auto; }
.purchases-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.purchases-table th {
  text-align: left; padding: 10px; background: #f8fafc;
  font-size: 11px; text-transform: uppercase; color: #475569;
}
.purchases-table td {
  padding: 10px; border-top: 1px solid #f1f5f9;
}
.purchases-table strong { color: #0f172a; }

@media (max-width: 640px) {
  .purchase-card { flex-direction: column; }
  .purchase-card__actions { width: 100%; }
  .purchase-card__actions .btn { flex: 1; }
}

/* ═══════════════════════════════════════════════
   Modal "Enviar a todos" (/dashboard/clientes)
   ═══════════════════════════════════════════════ */
.send-all-modal {
  border: 0; padding: 0; background: transparent;
  max-width: 560px; width: 92vw; border-radius: 16px;
}
.send-all-modal::backdrop { background: rgba(15,23,42,.7); backdrop-filter: blur(4px); }
.send-all-modal__card { background: #fff; border-radius: 16px; overflow: hidden; }
.send-all-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #e2e8f0;
}
.send-all-modal__head h3 { margin: 0; font-size: 17px; color: #0f172a; }
.send-all-modal__close {
  width: 32px; height: 32px; border-radius: 8px;
  background: #f1f5f9; border: 0; font-size: 20px; cursor: pointer; color: #64748b;
}
.send-all-modal__close:hover { background: #e2e8f0; color: #0f172a; }
.send-all-modal__body { padding: 18px 20px; max-height: 70vh; overflow-y: auto; }

.send-all-audience { display: grid; gap: 6px; margin-bottom: 16px; }
.send-all-audience > strong { font-size: 13px; color: #0f172a; margin-bottom: 4px; }
.send-all-audience label {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: #f8fafc; border-radius: 8px;
  font-size: 13px; cursor: pointer;
}
.send-all-audience label:has(input:checked) {
  background: color-mix(in srgb, var(--color-primary, #6366f1) 10%, #fff);
  border: 1px solid var(--color-primary, #6366f1);
  padding: 7px 9px;
}

.send-all-msg { display: block; margin-bottom: 16px; }
.send-all-msg > strong { display: block; font-size: 13px; color: #0f172a; margin-bottom: 4px; }
.send-all-msg textarea {
  width: 100%; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px;
  font-size: 14px; font-family: inherit; resize: vertical;
  box-sizing: border-box;
}
.send-all-msg small { display: block; margin-top: 4px; font-size: 11px; }

.send-all-methods { display: grid; gap: 10px; }
.send-all-methods > strong { font-size: 13px; color: #0f172a; margin-bottom: 2px; }
.send-all-method {
  padding: 12px 14px; background: #fafbfc; border: 1px solid #e2e8f0; border-radius: 10px;
}
.send-all-method__head {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px;
}
.send-all-method__ico {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #e2e8f0;
  font-size: 20px; flex-shrink: 0;
}
.send-all-method__head strong { display: block; color: #0f172a; font-size: 14px; }
.send-all-method__head small { display: block; font-size: 12px; color: #64748b; line-height: 1.3; }
.send-all-method__actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.send-progress { font-size: 12px; color: #64748b; font-weight: 600; }
.send-all-method--disabled { opacity: 0.55; }

@media (max-width: 640px) {
  .send-all-modal__body { padding: 14px; }
  .send-all-method__actions .btn { flex: 1; }
}

/* Variante "modo manual" — API no configurada */
.quota-card--manual {
  background: linear-gradient(135deg, #fefce8, #fef9c3);
  border: 1px dashed #fde047;
}
.quota-card--manual .quota-card__ico { opacity: 0.7; }
.quota-card--manual code {
  background: #fef3c7; padding: 1px 6px; border-radius: 4px;
  font-size: 11px; color: #78350f;
}

/* Mis addons activos */
.addons-my-active h2 { margin: 0 0 12px; font-size: 17px; }
.addons-active-list { display: grid; gap: 8px; }
.addon-active-card {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 10px;
}
.addon-active-card__ico { font-size: 24px; }
.addon-active-card__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.addon-active-card__body strong { color: #0f172a; font-size: 14px; }
.addon-active-card__body .muted { font-size: 12px; }

/* Secciones del catálogo */
.addons-section { margin: 24px 0; }
.addons-section h2 {
  font-size: 18px; margin: 0 0 12px;
  padding-bottom: 8px; border-bottom: 2px solid #f1f5f9;
}
.addons-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.addon-card {
  background: #fff; border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.addon-card:hover { border-color: var(--color-primary, #6366f1); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15,23,42,.06); }
.addon-card__ico { font-size: 32px; line-height: 1; }
.addon-card__body h3 { margin: 0 0 4px; font-size: 15px; color: #0f172a; }
.addon-card__desc { margin: 0; color: #64748b; font-size: 12px; line-height: 1.4; min-height: 34px; }
.addon-card__price { display: flex; align-items: baseline; gap: 4px; margin-top: 4px; }
.addon-card__price strong { font-size: 20px; color: #0f172a; font-weight: 800; }
.addon-card__price small { color: #64748b; font-size: 12px; }
.addon-card__form { display: flex; flex-direction: column; gap: 6px; }
.addon-card__form select {
  padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 13px;
}

/* ═══════════════════════════════════════════════
   PÁGINA PÚBLICA /planes
   ═══════════════════════════════════════════════ */

.pricing-hero {
  text-align: center; padding: 60px 20px 30px; max-width: 800px; margin: 0 auto;
}
.pricing-hero h1 {
  font-size: clamp(28px, 5vw, 48px); font-weight: 800;
  color: #0f172a; margin: 0 0 10px;
}
.pricing-hero__sub { font-size: 18px; color: #64748b; margin: 0; }

.pricing-plans { padding: 20px; max-width: 1200px; margin: 0 auto; }
.pricing-plans__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px; align-items: stretch;
}
.pricing-plan {
  background: #fff; border: 2px solid #e2e8f0; border-radius: 16px;
  padding: 28px 24px; position: relative;
  display: flex; flex-direction: column;
}
.pricing-plan--featured {
  border-color: var(--color-primary, #6366f1);
  box-shadow: 0 20px 50px rgba(99,102,241,.15);
  transform: scale(1.02);
}
.pricing-plan__badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #6366f1, #ec4899);
  color: #fff; padding: 6px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .05em;
  white-space: nowrap;
}
.pricing-plan__name {
  font-size: 22px; font-weight: 700; color: #0f172a;
  margin: 0 0 12px; text-align: center;
}
.pricing-plan__price {
  text-align: center; margin: 0 0 20px; display: flex; flex-direction: column; align-items: center;
}
.pricing-plan__price strong {
  font-size: 38px; font-weight: 800; color: #0f172a; line-height: 1;
}
.pricing-plan__price small { color: #64748b; font-size: 13px; }
.pricing-plan__features {
  list-style: none; padding: 0; margin: 0 0 20px; flex: 1;
  display: grid; gap: 10px;
}
.pricing-plan__features li {
  font-size: 14px; color: #334155;
  padding: 8px 0; border-bottom: 1px solid #f1f5f9;
}
.pricing-plan__features li strong { color: #0f172a; }
.pricing-plan__cta { margin-top: auto; }
.pricing-plan__trial {
  text-align: center; display: block; margin-top: 8px; font-size: 12px;
}

/* Addons section */
.pricing-addons {
  background: #f8fafc; padding: 60px 20px;
}
.pricing-addons__header { text-align: center; max-width: 700px; margin: 0 auto 30px; }
.pricing-addons__header h2 { font-size: 28px; color: #0f172a; margin: 0 0 8px; }
.pricing-addons__group { max-width: 1200px; margin: 0 auto 24px; }
.pricing-addons__group h3 {
  font-size: 18px; color: #0f172a;
  margin: 0 0 12px; padding-bottom: 6px; border-bottom: 2px solid #e2e8f0;
}
.pricing-addons__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.pricing-addon-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 16px; display: grid; grid-template-columns: 40px 1fr auto;
  gap: 12px; align-items: center;
}
.pricing-addon-card__ico { font-size: 28px; line-height: 1; }
.pricing-addon-card strong { color: #0f172a; font-size: 14px; display: block; }
.pricing-addon-card p { margin: 2px 0 0; font-size: 12px; line-height: 1.3; }
.pricing-addon-card__price { text-align: right; }
.pricing-addon-card__price strong { font-size: 16px; color: var(--color-primary, #6366f1); }
.pricing-addon-card__price small { font-size: 11px; color: #94a3b8; }

/* Tabla comparativa */
.pricing-compare { padding: 60px 20px; max-width: 1000px; margin: 0 auto; }
.pricing-compare h2 { text-align: center; font-size: 28px; margin: 0 0 30px; }
.pricing-compare__table-wrap { overflow-x: auto; }
.pricing-compare__table {
  width: 100%; border-collapse: collapse;
  background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
}
.pricing-compare__table th,
.pricing-compare__table td {
  padding: 14px 16px; border-bottom: 1px solid #f1f5f9;
  text-align: center;
}
.pricing-compare__table th:first-child,
.pricing-compare__table td:first-child { text-align: left; font-weight: 500; }
.pricing-compare__table th {
  background: #f8fafc; font-size: 14px; color: #0f172a;
}
.pricing-compare__table th small { display: block; color: #64748b; font-weight: 400; margin-top: 2px; }
.pricing-compare__table .yes { color: #16a34a; font-weight: 700; }
.pricing-compare__table .no  { color: #cbd5e1; }

/* CTA final */
.pricing-cta {
  background: linear-gradient(135deg, #6366f1, #ec4899);
  color: #fff; text-align: center; padding: 80px 20px;
}
.pricing-cta h2 { font-size: 32px; margin: 0 0 10px; }
.pricing-cta p { font-size: 18px; margin: 0 0 20px; opacity: .9; }
.pricing-cta .btn { background: #fff; color: #6366f1; font-weight: 800; }

@media (max-width: 640px) {
  .pricing-plan--featured { transform: none; }
  .addon-active-card { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════
   Video embed cards (TikTok, Instagram, Facebook)
   Para plataformas que NO permiten iframe cross-origin
   ═══════════════════════════════════════════════ */
.lz-video-card {
  display: flex; align-items: center; gap: 16px;
  max-width: 640px; margin: 0 auto;
  padding: 20px 24px;
  background: #fff;
  border: 2px solid var(--border-color, #e2e8f0);
  border-radius: 16px;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.lz-video-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
  text-decoration: none;
}
.lz-video-card__ico {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; line-height: 1;
}
.lz-video-card__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.lz-video-card__body strong { color: #0f172a; font-size: 16px; }
.lz-video-card__body small { color: #64748b; font-size: 12px; }
.lz-video-card__arrow { font-size: 22px; color: #94a3b8; }

/* Colores de marca por plataforma (hover) */
.lz-video-card--tiktok:hover    { border-color: #000; }
.lz-video-card--tiktok .lz-video-card__ico    { background: #000; color: #fff; }
.lz-video-card--instagram:hover { border-color: #dc2743; }
.lz-video-card--instagram .lz-video-card__ico { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; }
.lz-video-card--facebook:hover  { border-color: #1877f2; }
.lz-video-card--facebook .lz-video-card__ico  { background: #1877f2; color: #fff; }
.lz-video-card--unknown .lz-video-card__ico   { background: #f1f5f9; }

/* ═══════════════════════════════════════════════
   WhatsApp de contacto — widget home + form destacado
   ═══════════════════════════════════════════════ */

/* Banner del home (muestra estado del WhatsApp) */
.wa-banner {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px;
  border-radius: 14px;
  margin: 0 0 20px;
  flex-wrap: wrap;
}
.wa-banner__ico {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.wa-banner__body { flex: 1; min-width: 200px; }
.wa-banner__body h3 { margin: 0 0 4px; font-size: 16px; }
.wa-banner__body p { margin: 0; font-size: 13px; line-height: 1.4; }
.wa-banner__body small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; opacity: .7; }
.wa-banner__body strong { display: block; font-size: 18px; font-weight: 700; margin: 2px 0; letter-spacing: .02em; }
.wa-banner__body .muted { font-size: 12px; }
.wa-banner__actions { display: flex; gap: 8px; flex-shrink: 0; }

/* Variante MISSING — rojo urgente */
.wa-banner--missing {
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
  border: 2px solid #fecaca;
  animation: wa-pulse 2.5s ease-in-out infinite;
}
.wa-banner--missing .wa-banner__ico { background: #fca5a5; color: #fff; }
.wa-banner--missing h3 { color: #991b1b; }
.wa-banner--missing p  { color: #7f1d1d; }
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(252,165,165,0); }
  50%      { box-shadow: 0 0 0 8px rgba(252,165,165,.25); }
}

/* Variante OK — verde discreto */
.wa-banner--ok {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border: 1px solid #86efac;
}
.wa-banner--ok .wa-banner__ico { background: #22c55e; color: #fff; }
.wa-banner--ok small { color: #15803d; }
.wa-banner--ok strong { color: #14532d; font-family: ui-monospace, monospace; }
.wa-banner--ok .muted { color: #166534; }

@media (max-width: 640px) {
  .wa-banner { padding: 14px 16px; }
  .wa-banner__actions { width: 100%; }
  .wa-banner__actions .btn { flex: 1; }
}

/* Campo destacado en store_form */
.wa-field {
  background: linear-gradient(135deg, #f0fdf4, #f8fafc);
  border: 2px solid #86efac;
  border-radius: 14px;
  padding: 18px 20px;
  margin: 8px 0;
}
.wa-field__label {
  display: flex; gap: 14px; align-items: flex-start;
  margin-bottom: 12px;
}
.wa-field__ico {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: #22c55e; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.wa-field__label strong { display: block; color: #14532d; font-size: 15px; margin-bottom: 2px; }
.wa-field__label small { display: block; color: #166534; font-size: 12px; line-height: 1.4; font-weight: 500; }
.wa-field__input {
  width: 100%; padding: 12px 14px !important;
  font-size: 16px !important; /* 16 evita zoom iOS */
  font-family: ui-monospace, 'SF Mono', monospace !important;
  font-weight: 600;
  border: 2px solid #86efac !important;
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
}
.wa-field__input:focus {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.2);
  outline: none;
}

@media (max-width: 640px) {
  .wa-field { padding: 14px; }
  .wa-field__ico { width: 36px; height: 36px; font-size: 18px; }
}

/* ═══════════════════════════════════════════════
   Card de pago manual (addons) + panel super admin
   ═══════════════════════════════════════════════ */
.pay-manual-card {
  border: 2px solid #10b981;
  background: linear-gradient(135deg, #f0fdf4, #fff);
  margin-bottom: 20px;
}
.pay-manual-card__head {
  display: flex; gap: 14px; align-items: center;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid #d1fae5;
}
.pay-manual-card__ico {
  width: 48px; height: 48px; border-radius: 12px;
  background: #10b981; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
}
.pay-manual-card__head h3 { margin: 0 0 2px; font-size: 17px; color: #064e3b; }
.pay-manual-card__head p { margin: 0; font-size: 13px; }
.pay-manual-card__head strong { color: #064e3b; }

.pay-manual-card__methods {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px; margin-bottom: 12px;
}
.pay-method {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 12px 14px;
}
.pay-method__head { font-size: 13px; color: #0f172a; margin-bottom: 8px; }
.pay-method dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; }
.pay-method dt { color: #64748b; font-size: 12px; font-weight: 600; }
.pay-method dd { margin: 0; color: #0f172a; font-size: 13px; font-weight: 500; }
.pay-method code.copyable {
  background: #f1f5f9; padding: 2px 8px; border-radius: 6px;
  font-family: ui-monospace, 'SF Mono', monospace; font-size: 13px;
  color: #0f172a; cursor: pointer; user-select: all;
  transition: background .15s;
}
.pay-method code.copyable:hover { background: #e0f2fe; color: #0369a1; }
.pay-method code.copyable::after {
  content: ' 📋'; opacity: .5; font-size: 10px;
}

.pay-manual-card__instructions {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  color: #78350f;
  font-size: 13px;
  line-height: 1.5;
}

.pay-manual-card__mp p { margin: 0 0 10px; color: #334155; font-size: 13px; }

/* Super admin panel datos de pago */
.int-paymanual-box { border: 2px dashed #10b981; background: #f0fdf4; }
.int-paymanual__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.int-paymanual__grid label {
  display: flex; flex-direction: column; gap: 4px;
}
.int-paymanual__grid label > span {
  font-size: 12px; font-weight: 700; color: #064e3b;
}
.int-paymanual__grid input,
.int-paymanual__grid select,
.int-paymanual__grid textarea {
  padding: 8px 10px; border: 1px solid #bbf7d0; border-radius: 8px;
  font-size: 14px; background: #fff;
}
.int-paymanual__full { grid-column: 1 / -1; }

@media (max-width: 640px) {
  .int-paymanual__grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   Super admin — Gestión de addons
   ═══════════════════════════════════════════════ */
.sa-addons-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.sa-stat {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 14px 18px;
}
.sa-stat strong { display: block; font-size: 24px; font-weight: 800; color: #0f172a; }
.sa-stat small { color: #64748b; font-size: 12px; font-weight: 600; }
.sa-stat--revenue strong { color: #16a34a; }

.sa-addons-group { margin-bottom: 20px; }
.sa-addons-group h2 { margin: 0 0 12px; font-size: 16px; }

.sa-addons-table-wrap { overflow-x: auto; }
.sa-addons-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.sa-addons-table thead { background: #f8fafc; }
.sa-addons-table th {
  padding: 10px; text-align: left; color: #475569;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
}
.sa-addons-table td {
  padding: 10px; border-top: 1px solid #f1f5f9; vertical-align: middle;
}
.sa-addons-table tr:hover { background: #fafbfc; }
.sa-addons-row--inactive { opacity: 0.55; }
.sa-addons-ico { font-size: 24px; text-align: center; }
.sa-addons-table strong { display: block; color: #0f172a; font-size: 14px; }
.sa-addons-table small { display: block; color: #64748b; font-size: 11px; line-height: 1.3; }
.sa-addons-code {
  display: inline-block; font-size: 10px; color: #94a3b8;
  background: #f1f5f9; padding: 1px 6px; border-radius: 4px;
  margin-top: 2px; font-family: ui-monospace, monospace;
}

/* Form inline de precio */
.sa-addons-price-form {
  display: flex; gap: 4px;
}
.sa-addons-price-form input {
  flex: 1; min-width: 0; width: 80px;
  padding: 6px 8px; border: 1px solid #e2e8f0; border-radius: 6px;
  font-size: 13px; font-weight: 700; font-family: ui-monospace, monospace;
}
.sa-addons-price-form input:focus { border-color: #6366f1; outline: none; }
.sa-addons-price-form .btn { padding: 4px 8px; font-size: 12px; }

.sa-addons-type {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em;
}
.sa-addons-type--consumable { background: #fef3c7; color: #92400e; }
.sa-addons-type--monthly    { background: #dbeafe; color: #1e40af; }

/* Toggle botón estilo iOS */
.sa-toggle-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px 3px 3px; border-radius: 999px;
  border: 0; cursor: pointer; font-size: 11px; font-weight: 700;
  transition: background .2s;
}
.sa-toggle-btn__slider {
  display: inline-block; width: 28px; height: 16px; border-radius: 999px;
  background: #cbd5e1; position: relative; transition: background .2s;
}
.sa-toggle-btn__slider::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; transition: transform .2s;
}
.sa-toggle-btn.is-on { background: #dcfce7; color: #166534; }
.sa-toggle-btn.is-on .sa-toggle-btn__slider { background: #22c55e; }
.sa-toggle-btn.is-on .sa-toggle-btn__slider::after { transform: translateX(12px); }
.sa-toggle-btn.is-off { background: #f1f5f9; color: #64748b; }
.sa-toggle-btn:hover { filter: brightness(.95); }

/* Edit inline (details/summary) */
.sa-addons-edit > summary { list-style: none; cursor: pointer; }
.sa-addons-edit > summary::-webkit-details-marker { display: none; }
.sa-addons-edit[open] > summary { margin-bottom: 8px; }
.sa-addons-edit-form {
  position: absolute; right: 20px; z-index: 5;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.12);
  display: grid; gap: 8px; width: 320px;
}
.sa-addons-edit-form label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-weight: 600; color: #475569; }
.sa-addons-edit-form input,
.sa-addons-edit-form textarea { padding: 6px 8px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 13px; }

/* Hint de plataformas soportadas en el form */
.video-platforms-hint {
  margin-top: 8px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
}
.video-platforms-hint strong { color: #334155; font-size: 12px; display: block; margin-bottom: 6px; }
.video-platforms-hint ul { margin: 0; padding-left: 18px; color: #475569; }
.video-platforms-hint li { margin: 2px 0; }
.video-platforms-hint small { color: #94a3b8; }

/* Provider selector cards */
.int-provider-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px;
}
.int-provider-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px; background: #fff;
  border: 2px solid #e2e8f0; border-radius: 10px;
  cursor: pointer; transition: all .15s;
  text-align: center;
}
.int-provider-card:hover { border-color: #cbd5e1; }
.int-provider-card.is-active {
  border-color: var(--color-primary, #6366f1);
  background: color-mix(in srgb, var(--color-primary, #6366f1) 8%, #fff);
}
.int-provider-card input { display: none; }
.int-provider-card__ico { font-size: 28px; line-height: 1; }
.int-provider-card strong { color: #0f172a; font-size: 14px; }
.int-provider-card small { color: #64748b; font-size: 11px; line-height: 1.3; }

.int-flag-guide summary { cursor: pointer; padding: 12px 0; }
.int-flag-guide code { background: #f1f5f9; padding: 1px 5px; border-radius: 3px; font-size: 12px; }

@media (max-width: 640px) {
  .int-provider-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   🎨 Themes v2 — INPUTS del checkout (nombre, dirección, teléfono)
   Default: .store-page .cart-input input { color:#fff } → invisible en claros
   ===================================================================== */

/* CLAROS e INTERMEDIOS (5 temas) — inputs con fondo BLANCO + borde definido */
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .cart-input {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  transition: border-color .15s, box-shadow .15s;
}
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .cart-input:focus-within {
  border-color: var(--accent, #0f172a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #0f172a) 12%, transparent);
}
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .cart-input svg {
  color: #64748b;
}
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .cart-input input {
  color: #0f172a;
  font-weight: 500;
}
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .cart-input input::placeholder {
  color: #94a3b8;
}

/* GLASSMORPH — inputs con glass effect */
.store-page--glassmorph .cart-input {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.6);
}
.store-page--glassmorph .cart-input svg { color: #4338ca; }
.store-page--glassmorph .cart-input input { color: #1e1b4b; }
.store-page--glassmorph .cart-input input::placeholder { color: rgba(30,27,75,0.5); }

/* MAGAZINE-DARK — inputs con tinte carbón cálido */
.store-page--magazine-dark .cart-input {
  background: rgba(245,238,220,0.06);
  border: 1px solid rgba(245,238,220,0.15);
}
.store-page--magazine-dark .cart-input svg { color: rgba(245,238,220,0.6); }
.store-page--magazine-dark .cart-input input { color: #f5eedc; }
.store-page--magazine-dark .cart-input input::placeholder { color: rgba(245,238,220,0.5); }

/* LUXURY-GOLD — inputs con acentos dorados */
.store-page--luxury-gold .cart-input {
  background: rgba(212,175,55,0.06);
  border: 1px solid rgba(212,175,55,0.2);
}
.store-page--luxury-gold .cart-input:focus-within { border-color: #d4af37; box-shadow: 0 0 0 3px rgba(212,175,55,0.15); }
.store-page--luxury-gold .cart-input svg { color: rgba(245,230,184,0.6); }
.store-page--luxury-gold .cart-input input { color: #f5e6b8; }
.store-page--luxury-gold .cart-input input::placeholder { color: rgba(245,230,184,0.4); }

/* NOIR — inputs minimalistas */
.store-page--noir .cart-input {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
}
.store-page--noir .cart-input svg { color: rgba(255,255,255,0.5); }
.store-page--noir .cart-input input { color: #fafafa; }
.store-page--noir .cart-input input::placeholder { color: rgba(255,255,255,0.4); }

/* =====================================================================
   🎨 Themes v2 — Métodos de pago, filas de detalle, cambio efectivo
   Los 5 temas claros/intermedios necesitan fondos claros + texto oscuro
   ===================================================================== */

/* ——— CLAROS/INTERMEDIOS (5) — .pm-option ——— */
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .pm-option {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  color: #334155;
}
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .pm-option:hover {
  background: #f1f5f9;
}
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .pm-option.is-active {
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  border-color: var(--accent);
}
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .pm-option__info strong {
  color: #0f172a;
}
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .pm-option__info small {
  color: #64748b;
}
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .pm-option__check {
  border-color: #cbd5e1;
}

/* ——— CLAROS/INTERMEDIOS (5) — .pm-row (datos bancarios, nequi, etc.) ——— */
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .pm-row {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .pm-row__label { color: #64748b; }
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .pm-row__value code { color: #0f172a; }

/* ——— CLAROS/INTERMEDIOS (5) — .cash-change (input "paga con") ——— */
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .cash-change {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
:is(.store-page--pure, .store-page--magazine-light, .store-page--aurora-light, .store-page--warm, .store-page--botanical) .cash-change__row {
  color: #475569;
}

/* ——— GLASSMORPH — glass effect ——— */
.store-page--glassmorph .pm-option {
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255,255,255,0.6);
  color: #1e1b4b;
}
.store-page--glassmorph .pm-option:hover { background: rgba(255,255,255,0.7); }
.store-page--glassmorph .pm-option.is-active { background: rgba(30,27,75,0.1); border-color: var(--accent); }
.store-page--glassmorph .pm-option__info strong { color: #1e1b4b; }
.store-page--glassmorph .pm-option__info small { color: #4338ca; }
.store-page--glassmorph .pm-row {
  background: rgba(255,255,255,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.6);
}
.store-page--glassmorph .pm-row__label { color: #4338ca; }
.store-page--glassmorph .pm-row__value code { color: #1e1b4b; }
.store-page--glassmorph .cash-change {
  background: rgba(255,255,255,0.5); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.6);
}
.store-page--glassmorph .cash-change__row { color: #1e1b4b; }

/* ——— MAGAZINE-DARK — tinte carbón cálido ——— */
.store-page--magazine-dark .pm-option {
  background: rgba(245,238,220,0.05);
  border: 2px solid rgba(245,238,220,0.12);
  color: rgba(245,238,220,0.8);
}
.store-page--magazine-dark .pm-option__info strong { color: #f5eedc; }
.store-page--magazine-dark .pm-option__info small { color: rgba(245,238,220,0.6); }
.store-page--magazine-dark .pm-row {
  background: rgba(245,238,220,0.04);
  border: 1px solid rgba(245,238,220,0.1);
}
.store-page--magazine-dark .pm-row__value code { color: #f5eedc; }

/* ——— LUXURY-GOLD — acentos dorados ——— */
.store-page--luxury-gold .pm-option {
  background: rgba(212,175,55,0.05);
  border: 2px solid rgba(212,175,55,0.2);
  color: rgba(245,230,184,0.85);
}
.store-page--luxury-gold .pm-option:hover { background: rgba(212,175,55,0.1); }
.store-page--luxury-gold .pm-option.is-active {
  background: rgba(212,175,55,0.15);
  border-color: #d4af37;
}
.store-page--luxury-gold .pm-option__info strong { color: #f5e6b8; }
.store-page--luxury-gold .pm-option__info small { color: rgba(245,230,184,0.6); }
.store-page--luxury-gold .pm-row {
  background: rgba(212,175,55,0.05);
  border: 1px solid rgba(212,175,55,0.2);
}
.store-page--luxury-gold .pm-row__value code { color: #f5e6b8; }

/* ——— NOIR — tweaks mínimos ——— */
.store-page--noir .pm-option {
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.1);
}
.store-page--noir .pm-option__info strong { color: #fafafa; }
.store-page--noir .pm-option.is-active { border-color: #fff; background: rgba(255,255,255,0.08); }



/* ═══════════════════════════════════════════════
   PRODUCTOS DESTACADOS — storefront badge + strip
   ═══════════════════════════════════════════════ */

/* Badge DESTACADO en la tarjeta del catálogo */
.badge--gold {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, .35);
  font-weight: 800; letter-spacing: .04em;
}
.product-card__badge--featured {
  position: absolute; top: 8px; left: 8px;
  font-size: 10px; padding: 4px 8px;
  border-radius: 999px; z-index: 2;
  animation: featured-pulse 2.5s ease-in-out infinite;
}
@keyframes featured-pulse {
  0%, 100% { box-shadow: 0 2px 6px rgba(245, 158, 11, .35); }
  50%      { box-shadow: 0 0 0 4px rgba(245, 158, 11, .18); }
}
/* Si hay OFERTA Y DESTACADO, ponemos el DESTACADO un poco más abajo */
.product-card:has(.product-card__badge--tl) .product-card__badge--featured {
  top: 36px;
}

/* Franja de destacados arriba del catálogo */
.featured-strip {
  padding: 20px 20px 8px; max-width: var(--container-max); margin: 0 auto;
}
.featured-strip__head {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px;
}
.featured-strip__head h2 {
  font-size: 18px; font-weight: 800; margin: 0;
  background: linear-gradient(135deg, #f59e0b, #dc2626);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.featured-strip__head small { color: #64748b; font-size: 12px; }

.featured-strip__track {
  display: flex; gap: 12px; overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.featured-strip__track::-webkit-scrollbar { height: 5px; }
.featured-strip__track::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }

.featured-card {
  flex: 0 0 auto; width: 140px;
  scroll-snap-align: start;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  overflow: hidden; text-decoration: none; color: inherit;
  position: relative;
  transition: transform .15s, box-shadow .2s;
}
.featured-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(245, 158, 11, .22);
  border-color: #fbbf24;
  text-decoration: none;
}
.featured-card img { width: 100%; height: 110px; object-fit: cover; display: block; }
.featured-card__img-empty { width: 100%; height: 110px; background: linear-gradient(135deg,#fef3c7,#fde68a); }
.featured-card__badge {
  position: absolute; top: 6px; right: 6px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #fff; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 13px;
  box-shadow: 0 2px 6px rgba(245, 158, 11, .5);
}
.featured-card__body { padding: 8px 10px 10px; }
.featured-card__body strong {
  display: block; font-size: 12px; font-weight: 700;
  margin-bottom: 4px; color: #0f172a;
  line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.featured-card__price { font-size: 14px; font-weight: 800; color: #0f172a; }
.featured-card__compare {
  display: inline-block; margin-left: 6px;
  font-size: 11px; color: #94a3b8; text-decoration: line-through;
}

@media (max-width: 480px) {
  .featured-card { width: 120px; }
  .featured-card img, .featured-card__img-empty { height: 90px; }
}

/* Temas oscuros: adaptar la franja */
.store-page--dark .featured-card,
.store-page--noir .featured-card,
.store-page--magazine-dark .featured-card {
  background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08);
}
.store-page--dark .featured-card__body strong,
.store-page--noir .featured-card__body strong,
.store-page--magazine-dark .featured-card__body strong,
.store-page--dark .featured-card__price,
.store-page--noir .featured-card__price,
.store-page--magazine-dark .featured-card__price { color: #fafafa; }

/* =====================================================================
   DASHBOARD DARK MODE
   Activado con html.dark-mode (clase puesta por JS al cargar / toggle).
   El script anti-flash en <head> lo aplica antes del primer render.
   ===================================================================== */

/* ── Botón toggle (circular, elegante) ── */
.dash-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg-tertiary);
  border: 1.5px solid var(--border-color);
  font-size: 18px; cursor: pointer; line-height: 1;
  box-shadow: var(--shadow-sm);
  transition: all .2s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0;
}
.dash-theme-toggle:hover {
  background: var(--border-color);
  transform: rotate(20deg) scale(1.08);
  box-shadow: var(--shadow-md);
}

/* ── Variables del modo oscuro ── */
html.dark-mode {
  --bg-primary:   #0f172a;
  --bg-secondary: #1a2236;
  --bg-tertiary:  #253047;
  --bg-card:      #1e293b;
  --bg-app:       #0f172a;
  --border-color: #334155;
  --border-strong:#475569;
  --text-primary: #e2e8f0;
  --text-secondary:#94a3b8;
  --text-muted:   #64748b;
  --shadow-card:  0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:    0 4px 8px rgba(0,0,0,0.4);
}

/* ── Body & layout base ── */
html.dark-mode body.dash-body {
  background: var(--bg-app);
  color: var(--text-primary);
}

/* ── Sidebar (ya tiene fondo oscuro, refinamos bordes) ── */
html.dark-mode .dash-sidebar {
  border-color: #1e293b;
}

/* ── Header ── */
html.dark-mode .dash-header {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

/* ── Store-preview inline styles override ── */
html.dark-mode .store-preview__stats {
  background: #253047 !important;
  color: #94a3b8 !important;
}
html.dark-mode .store-preview__btn {
  background: #253047 !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}
html.dark-mode .store-preview__btn:hover {
  background: #334155 !important;
}
html.dark-mode .store-preview__btn--primary {
  background: #6366f1 !important;
  border-color: #6366f1 !important;
  color: #fff !important;
}
html.dark-mode .store-preview__btn--primary:hover {
  background: #4f46e5 !important;
}

/* ── User chip & switcher ── */
html.dark-mode .dash-user {
  background: #253047;
  color: var(--text-primary);
}
html.dark-mode .store-switcher__label {
  color: var(--text-muted);
}
html.dark-mode .store-switcher select {
  background: #253047;
  border-color: #334155;
  color: var(--text-primary);
}

/* ── Theme toggle button in dark mode ── */
html.dark-mode .dash-theme-toggle {
  background: #253047;
  border-color: #475569;
  color: #e2e8f0;
}
html.dark-mode .dash-theme-toggle:hover {
  background: #334155;
}

/* ── Main content area ── */
html.dark-mode .dash-main {
  background: var(--bg-app);
}

/* ── Cards & generics ── */
html.dark-mode .card,
html.dark-mode .metric-card,
html.dark-mode .quick-card,
html.dark-mode .filter-bar,
html.dark-mode .onboarding__card {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.dark-mode .quick-card:hover {
  border-color: #6366f1 !important;
}

/* ── Tables ── */
html.dark-mode .table {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}
html.dark-mode .table thead th {
  background: #253047 !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
html.dark-mode .table tbody tr {
  border-color: var(--border-color) !important;
  color: var(--text-primary);
}
html.dark-mode .table tbody tr:hover {
  background: #253047 !important;
}

/* ── Inputs & forms ── */
html.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html.dark-mode select,
html.dark-mode textarea {
  background: #1e293b !important;
  border-color: #475569 !important;
  color: var(--text-primary) !important;
}
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
  color: var(--text-muted) !important;
}
html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.18) !important;
}
html.dark-mode label {
  color: var(--text-primary);
}
html.dark-mode .form label,
html.dark-mode label.form__check {
  color: var(--text-secondary);
}

/* ── Badges ── */
html.dark-mode .badge {
  filter: brightness(0.82) saturate(0.9);
}

/* ── Text helpers ── */
html.dark-mode .muted,
html.dark-mode .text-muted,
html.dark-mode p.muted {
  color: var(--text-muted) !important;
}
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4 {
  color: var(--text-primary);
}
html.dark-mode .page-head h1 {
  color: var(--text-primary);
}

/* ── Flash messages ── */
html.dark-mode .flash--success { background: #052e16; color: #86efac; border-color: #166534; }
html.dark-mode .flash--error   { background: #1f0707; color: #fca5a5; border-color: #991b1b; }
html.dark-mode .flash--info    { background: #0c1a2e; color: #93c5fd; border-color: #1e40af; }

/* ── Trial / warning banners ── */
html.dark-mode .trial-banner {
  background: linear-gradient(135deg, #1e293b, #252f3e);
  color: #93c5fd;
  border-color: #2563eb;
}
html.dark-mode .trial-banner--warn    { background: linear-gradient(135deg, #1f1007, #2a1805); color: #fcd34d; border-color: #92400e; }
html.dark-mode .trial-banner--expired { background: linear-gradient(135deg, #1f0707, #2a0e0e); color: #fca5a5; border-color: #991b1b; }

/* ── Category list ── */
html.dark-mode .cat-list li {
  background: #253047 !important;
  border-color: #334155 !important;
  color: var(--text-primary) !important;
}

/* ── Notification panel ── */
html.dark-mode .notif-panel {
  background: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}
html.dark-mode .notif-panel__head {
  border-color: #334155 !important;
  color: var(--text-primary);
}
html.dark-mode .notif-panel__link {
  color: #93c5fd !important;
}
html.dark-mode .notif-item {
  border-color: #334155 !important;
  color: var(--text-primary) !important;
}
html.dark-mode .notif-item:hover {
  background: #253047 !important;
}
html.dark-mode .notif-panel__empty {
  color: var(--text-muted) !important;
}

/* ── Modals (dialogs) ── */
html.dark-mode dialog {
  background: transparent;
}
html.dark-mode dialog::backdrop {
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
}
html.dark-mode .bgrm-modal__card,
html.dark-mode .share-modal__card,
html.dark-mode .cfm__card {
  background: #1e293b !important;
  border: 1px solid #334155;
  color: var(--text-primary) !important;
}
html.dark-mode .bgrm-modal__close,
html.dark-mode .share-modal__close {
  background: #253047 !important;
  color: var(--text-muted) !important;
}
html.dark-mode .bgrm-modal__close:hover,
html.dark-mode .share-modal__close:hover {
  background: #334155 !important;
  color: var(--text-primary) !important;
}
html.dark-mode .cfm__msg,
html.dark-mode .cfm__title {
  color: var(--text-primary) !important;
}
html.dark-mode .cfm__input {
  background: #253047 !important;
  border-color: #475569 !important;
  color: var(--text-primary) !important;
}
html.dark-mode .bgrm-modal__progress {
  background: #0c1a2e !important;
  border-color: #1e40af !important;
  color: #93c5fd !important;
}

/* ── Share modal specifics ── */
html.dark-mode .share-modal__url input {
  background: #253047 !important;
  border-color: #334155 !important;
  color: var(--text-primary) !important;
}

/* ── Buttons in dark mode (outline & ghost) ── */
html.dark-mode .btn--outline {
  background: #1e293b !important;
  border-color: #475569 !important;
  color: var(--text-primary) !important;
}
html.dark-mode .btn--outline:hover {
  border-color: #6366f1 !important;
  color: #a5b4fc !important;
  background: #253047 !important;
}
html.dark-mode .btn--ghost {
  color: var(--text-secondary) !important;
}
html.dark-mode .btn--ghost:hover {
  background: #253047 !important;
  color: var(--text-primary) !important;
}

/* ── Cookie banner ── */
html.dark-mode .cookie-banner {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: var(--text-primary) !important;
}

/* ── Uploader ── */
html.dark-mode .uploader__preview {
  background: #253047 !important;
  border-color: #475569 !important;
}
html.dark-mode .uploader__hint {
  background: linear-gradient(135deg, #0c1a2e, #0c1f18) !important;
  border-color: #1e3a8a !important;
  color: #93c5fd !important;
}

/* ── Theme card in dark mode ── */
html.dark-mode .theme-card {
  background: #1e293b !important;
  border-color: #334155 !important;
}
html.dark-mode .theme-card__info strong {
  color: var(--text-primary) !important;
}
html.dark-mode .theme-card__info small {
  color: var(--text-muted) !important;
}

/* ── Mobile sidebar drawer ── */
html.dark-mode .dash-sidebar-backdrop {
  background: rgba(0,0,0,0.6) !important;
}

/* ── Page builder / wizard cards ── */
html.dark-mode .wizard-card,
html.dark-mode .wizard-step {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: var(--text-primary) !important;
}

/* ── Auth card (if opened in dashboard context) ── */
html.dark-mode .auth-card {
  background: #1e293b !important;
  border: 1px solid #334155;
  color: var(--text-primary);
}

/* ── Plan picker ── */
html.dark-mode .plan-picker__option {
  border-color: #334155 !important;
  color: var(--text-primary) !important;
}
html.dark-mode .plan-picker__option:hover {
  border-color: #6366f1 !important;
}
html.dark-mode .plan-picker__option:has(input:checked) {
  background: rgba(37,99,235,0.15) !important;
  border-color: #6366f1 !important;
}


/* -- #4 Progressive Blur-Up Image Loading -- */
.product-card__img--blur {
  filter: blur(8px) saturate(0.6);
  transform: scale(1.04);
  transition: filter 0.5s ease, transform 0.5s ease;
  will-change: filter, transform;
}
.product-card__img--loaded {
  filter: blur(0) saturate(1);
  transform: scale(1);
}