:root {
  /* Paleta Coronel Sur — handoff oficial (cream + naranja + ink negro) */
  --accent: #ec5f1f;
  --accent-2: #f97316;
  --accent-ink: #c2410c;
  --accent-soft: #fde6d6;
  --accent-glow: rgba(236, 95, 31, 0.18);
  /* --brand: usado en el precio hero del detalle, el hint mayorista y el precio
     de relacionados. Nunca estaba definido → esos elementos perdían el naranja
     de marca. Lo mapeamos al naranja oscuro (pasa contraste AA en cualquier
     tamaño, a diferencia del --accent brillante). */
  --brand: var(--accent-ink);
  --bg: #faf6f1;
  --bg-elev: #ffffff;
  --bg-2: #f5efe5;
  --surface: #ffffff;
  --surface-2: #ede5d6;
  --ink: #1a1a1a;
  --ink-2: #3d3933;
  --ink-3: #6b645b;
  --ink-4: #a89f92;
  --line: #e5dccb;
  --line-2: #d4c8b0;
  --ok: #2d8050;
  --warn: #c2410c;
  --neg: #b24a3a;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.04), 0 1px 1px rgba(26, 26, 26, 0.03);
  --shadow: 0 2px 8px rgba(26, 26, 26, 0.06), 0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-lg: 0 12px 32px rgba(26, 26, 26, 0.10), 0 4px 8px rgba(26, 26, 26, 0.04);
  /* Tipografía: editorial mejorada — Inter Tight (UI) + Space Grotesk (display)
   * + Instrument Serif italic (acentos: números, comillas, énfasis) +
   * JetBrains Mono (códigos, SKUs). */
  --font-sans: "Inter Tight", system-ui, -apple-system, sans-serif;
  --font-display: "Space Grotesk", "Inter Tight", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.6;
}
/* Títulos con jerarquía editorial. La <em> dentro de un h1/h2 cae a serif
   italic naranja para acentos tipográficos del handoff. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 em, h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1360px; margin: 0 auto; padding: 0 28px; }
.announce {
  background: var(--ink);
  color: #F3EEE6;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
.announce-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  gap: 24px;
}
.announce-ticker {
  display: flex;
  gap: 32px;
  overflow: hidden;
  flex: 1;
}
.announce-ticker span { white-space: nowrap; opacity: 0.85; }
.announce-ticker span b { color: var(--accent); font-weight: 700; margin-right: 6px; }
.announce-meta { display: flex; gap: 18px; align-items: center; opacity: 0.7; }
.announce-meta a:hover { color: var(--accent); opacity: 1; }
.header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  height: 78px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand-mark {
  width: 46px;
  height: 46px;
  object-fit: contain;
}
.brand-text { line-height: 1; }
.brand-name {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand-tag {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
  font-weight: 500;
}
.search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-2);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 18px;
  height: 46px;
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
  transition: 0.15s;
}
.search:focus-within {
  background: var(--surface);
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(25, 22, 19, 0.05);
}
.search input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-size: 14.5px;
}
.search input::placeholder { color: var(--ink-3); }
.search-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 2px 6px;
}

/* Typeahead dropdown */
.search-suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(20,17,12,.12), 0 2px 8px rgba(20,17,12,.06);
  max-height: 420px;
  overflow-y: auto;
  z-index: 800;
  padding: 6px;
}
.suggest-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s;
}
.suggest-row:hover, .suggest-row.active {
  background: var(--bg-2);
}
.suggest-thumb {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--bg-2);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 22px;
}
.suggest-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}
.suggest-info { flex: 1; min-width: 0; }
.suggest-name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggest-meta {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 2px;
}
.suggest-meta b {
  color: var(--ink);
  font-weight: 700;
}
.suggest-empty {
  padding: 16px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hbtn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-2);
  transition: 0.15s;
  border: 1px solid transparent;
}
.hbtn:hover { background: var(--bg-2); }
.hbtn.hbtn-pill {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: rgba(180, 67, 26, 0.15);
}
.hbtn.hbtn-pill:hover { background: var(--accent); color: white; border-color: var(--accent); }
.hbtn.hbtn-wa { background: var(--ink); color: white; }
.hbtn.hbtn-wa:hover { background: #000; }
.hbtn-cart {
  background: var(--accent);
  color: white;
  position: relative;
}
.hbtn-cart:hover { background: var(--accent-ink); }
.hbtn-cart .badge {
  background: white;
  color: var(--accent);
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
.hicon {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  transition: 0.15s;
}
.hicon:hover { background: var(--bg-2); color: var(--ink); }
.catrail {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.catrail-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  overflow-x: auto;
  scrollbar-width: none;
}
.catrail-inner::-webkit-scrollbar { display: none; }
.catrail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  transition: 0.15s;
}
.catrail-item:hover { background: var(--bg-2); }
.catrail-item.active {
  background: var(--ink);
  color: white;
}
.catrail-sep {
  width: 1px;
  height: 22px;
  background: var(--line);
  margin: 0 8px;
}
.catrail-loc {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 13px;
  color: var(--ink-3);
  padding: 8px 14px;
  border-radius: 999px;
}
.catrail-loc:hover { background: var(--bg-2); color: var(--ink); }
.hero {
  padding: 36px 0 48px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.hero-main {
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 52px 56px;
  position: relative;
  overflow: hidden;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 15%, rgba(236, 95, 31, 0.10) 0%, transparent 55%),
    radial-gradient(circle at 10% 90%, rgba(236, 95, 31, 0.05) 0%, transparent 45%);
  pointer-events: none;
}
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.hero-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(44px, 5.2vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--ink);
  margin: 18px 0 0;
  position: relative;
  text-wrap: balance;
}
/* La <em> dentro del título usa Instrument Serif italic naranja —
   acento editorial del handoff. */
.hero-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.hero-title .outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}
.hero-sub {
  font-size: 18px;
  color: var(--ink-2);
  max-width: 56ch;
  margin: 22px 0 0;
  line-height: 1.55;
  position: relative;
}
.hero-ctas {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  position: relative;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  transition: 0.15s;
  white-space: nowrap;
}
/* Fondo naranja OSCURO (--accent-ink) en vez del brillante (--accent): con
   texto blanco el brillante daba 3.37:1 (falla WCAG AA 4.5:1); el oscuro da
   ~5.5:1 y sigue siendo el naranja de marca. Afecta a "Comprar/Finalizar/Ver
   productos". Revertible en una línea si se prefiere el brillante. */
.btn-primary { background: var(--accent-ink); color: white; }
.btn-primary:hover { background: #a5370a; transform: translateY(-1px); }
.btn-ghost-dark {
  background: transparent;
  color: #F3EEE6;
  border: 1px solid rgba(243, 238, 230, 0.25);
}
.btn-ghost-dark:hover { border-color: rgba(243, 238, 230, 0.6); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-2);
}
.btn-ghost:hover { border-color: var(--ink); }
.btn-ink { background: var(--ink); color: white; }
.btn-ink:hover { background: #000; }
.hero-meta {
  display: flex;
  gap: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--line-2);
  position: relative;
  margin-top: 40px;
}
.hero-meta-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Números editoriales: Instrument Serif italic gigante, sello del handoff. */
.hero-meta-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 44px;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.hero-meta-label {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-weight: 500;
}
.hero-side {
  display: grid;
  grid-template-rows: 1.4fr 1fr;
  gap: 24px;
}
.hero-card {
  border-radius: var(--radius-xl);
  padding: 32px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
}
.hero-card-promo {
  background: var(--accent);
  color: white;
}
.hero-card-promo::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
}
.hero-card-mini {
  background: var(--surface);
  border: 1px solid var(--line);
}
.hero-card-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}
.hero-card-title {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 12px 0 0;
}
.hero-card-promo .hero-card-title { font-size: 38px; }
.hero-card-desc {
  font-size: 14px;
  opacity: 0.85;
  margin-top: 8px;
  line-height: 1.45;
}
.hero-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 600;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
}
.hero-promo-code {
  font-family: var(--font-mono);
  background: rgba(0,0,0,0.2);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  letter-spacing: 0.05em;
  display: inline-block;
  margin-top: 16px;
}
.trust {
  padding: 8px 0 48px;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) { .trust-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
.trust-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 16px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  transition: 0.15s;
  box-shadow: var(--shadow-sm);
}
.trust-item:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.trust-img {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.trust-img img { width: 100%; height: 100%; object-fit: contain; }
.trust-svg {
  width: 56px;
  height: 56px;
  border-radius: 15px;
  background: linear-gradient(135deg, #fff5ec 0%, #ffe0c5 100%);
  color: #d8541d;
}
.trust-svg svg { width: 30px; height: 30px; }
.trust-title {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 0;
  line-height: 1.2;
}
/* --accent (#ec5f1f) sobre blanco da 3.37:1 → falla AA para texto chico. Las
   palabras naranja de la fila de confianza (arriba de todo) usan el naranja
   oscuro (--accent-ink, 5.18:1). */
.trust-title em { color: var(--accent-ink); font-style: normal; font-weight: 800; }
.trust-desc {
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 6px 0 0;
  line-height: 1.45;
}
.section {
  padding: 32px 0 80px;
}
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: 32px;
  flex-wrap: wrap;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
.section-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.section-sub {
  font-size: 16px;
  color: var(--ink-3);
  margin: 12px 0 0;
  max-width: 56ch;
  line-height: 1.5;
}
.section-tools {
  display: flex;
  gap: 8px;
  align-items: center;
}
.plist {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: flex-start;
}
.filters {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  position: sticky;
  top: 100px;
}
.filters h3 {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  margin: 0 0 12px;
}
.filter-group { border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 18px; }
.filter-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.filter-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
  transition: 0.1s;
}
.filter-opt:hover { background: var(--bg-2); color: var(--ink); }
.filter-opt.active { background: var(--ink); color: white; font-weight: 600; }
.filter-opt.active .filter-count { color: rgba(255,255,255,0.6); }
.filter-count { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.price-range {
  display: flex;
  gap: 8px;
  align-items: center;
}
.price-range input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  font-size: 13px;
  background: var(--bg);
}
.price-range input:focus { outline: none; border-color: var(--ink); background: white; }
.price-range span { color: var(--ink-3); font-size: 13px; }
.chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font-size: 12.5px;
  color: var(--ink-2);
  transition: 0.1s;
}
.chip:hover { border-color: var(--ink); }
.chip.active { background: var(--ink); color: white; border-color: var(--ink); }

/* Chips de filtro rapido sobre la grilla */
.filter-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
  margin: 8px 0 14px;
}
.fchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line-2);
  background: transparent; color: var(--ink-2);
  font-size: 13px; font-family: inherit; cursor: pointer;
  transition: 0.12s;
}
.fchip:hover { border-color: var(--ink); color: var(--ink); }
.fchip.active {
  /* Texto oscuro sobre el naranja (5.7:1) en vez de blanco (3.37:1, falla AA). */
  background: var(--accent, #f08340); color: #0c0c0e; border-color: var(--accent, #f08340);
}
.fchip.fchip-clear { color: var(--warn, #b04); border-color: transparent; }
.fchip.fchip-clear:hover { background: rgba(176, 0, 68, 0.08); }
.fchip-price {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line-2);
  font-size: 13px; color: var(--ink-2);
}
.fchip-price input {
  width: 70px; padding: 4px 8px;
  border: 1px solid transparent; border-radius: 6px;
  background: rgba(0,0,0,0.04);
  font-size: 13px; font-family: inherit; color: var(--ink);
  outline: none;
}
.fchip-price input:focus { border-color: var(--accent, #f08340); }
.fchip-price input::-webkit-outer-spin-button,
.fchip-price input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}
.toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-3);
}
.toolbar-left b { color: var(--ink); font-variant-numeric: tabular-nums; }
.toolbar-right { display: flex; gap: 10px; align-items: center; }
.select-wrap {
  position: relative;
  display: inline-block;
}
.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 10px 36px 10px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}
.select-wrap::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-30%) rotate(45deg);
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  pointer-events: none;
}
.view-toggle {
  display: flex;
  background: var(--bg-2);
  border-radius: 10px;
  padding: 3px;
}
.view-toggle button {
  width: 36px;
  height: 34px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: var(--ink-3);
}
.view-toggle button.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
}
.grid[data-density="compact"] { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.grid[data-density="spacious"] { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }

/* #3 del diagnostico — mobile:
   (a) Catalogo a 2 columnas en celular. Antes con auto-fill(210px) entraba
       1 sola columna en cualquier telefono -> 1 producto por fila. El id +
       [data-style="grid"] gana en especificidad y no afecta la vista lista. */
@media (max-width: 640px) {
  #products-grid[data-style="grid"] { grid-template-columns: 1fr 1fr; gap: 12px; }
}
/* (b) Destapar el checkout en mobile: el chrome fijo (bottom-nav z9998,
   cart-bar z9997, #wa-fab z9999) tapaba el boton "Finalizar" del carrito/
   checkout (drawer z101). Cuando hay un overlay abierto, se oculta. :has()
   tiene soporte amplio; si un browser viejo no lo entiende, degrada al
   comportamiento anterior (no rompe nada). */
@media (max-width: 720px) {
  body:has(#cart-scrim.open) .cs-mobile-bottom-nav,
  body:has(#cart-scrim.open) .cs-mobile-cart-bar,
  body:has(#cart-scrim.open) #wa-fab,
  body:has(.modal-scrim.open) .cs-mobile-bottom-nav,
  body:has(.modal-scrim.open) .cs-mobile-cart-bar,
  body:has(.modal-scrim.open) #wa-fab,
  body:has(.welcome-scrim.open) .cs-mobile-bottom-nav,
  body:has(.welcome-scrim.open) .cs-mobile-cart-bar,
  body:has(.welcome-scrim.open) #wa-fab {
    display: none !important;
  }
}
/* (c) El #wa-fab (z9999) es fijo en CUALQUIER anchura, así que arriba de 720px
   (celular horizontal, tablet) seguía flotando sobre el botón "Finalizar" del
   checkout. Esta regla lo oculta cuando hay un overlay abierto sin importar el
   ancho. El bottom-nav/cart-bar son mobile-only y ya están ocultos ahí, así que
   solo el wa-fab necesita destaparse fuera del media query. */
body:has(#cart-scrim.open) #wa-fab,
body:has(.modal-scrim.open) #wa-fab,
body:has(.welcome-scrim.open) #wa-fab {
  display: none !important;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: 0.2s;
  position: relative;
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--line-2);
}
.card-media {
  aspect-ratio: 1 / 1;
  background: var(--bg-2);
  position: relative;
  overflow: hidden;
}
.card-media .ph {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.card-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
.badge-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 5px;
  font-weight: 500;
}
.badge-sale { background: var(--accent); color: white; }
.badge-new { background: var(--ink); color: white; }
.badge-hot { background: #fff3c7; color: #7a5200; }
.badge-low { background: #fde2e2; color: #8a1a1a; }
.badge-outlet { background: #1f2937; color: #fff; letter-spacing: 0.05em; font-weight: 700; }
.card-fav {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  /* Sin backdrop-filter: un blur POR CARD (40-200 superficies compuestas
     al scrollear) era el costo #1 de GPU en Android gama media. El fondo
     un poco más opaco es visualmente casi idéntico. */
  background: rgba(255,255,255,0.94);
  display: grid;
  place-items: center;
  color: var(--ink-3);
  z-index: 2;
  transition: 0.15s;
}
.card-fav:hover { color: var(--accent); transform: scale(1.1); }
.card-fav.active { color: var(--accent); background: white; }
.card-quick {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  /* Sin backdrop-filter (mismo motivo que .card-fav). */
  background: rgba(25, 22, 19, 0.95);
  color: white;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(10px);
  transition: 0.2s;
}
.card:hover .card-quick { opacity: 1; transform: translateY(0); }
.card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.card-cat {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* --ink-4 (#a89f92) daba ~2.4:1 sobre blanco: ilegible (falla WCAG AA).
     --ink-3 (#6b645b) sube a ~5.4:1 y sigue leyendose como "etiqueta". */
  color: var(--ink-3);
  font-weight: 600;
}
.card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 2px 0 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.card-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
}
.card-price {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.card-price-old {
  font-size: 13px;
  color: var(--ink-3);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.card-meta {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}
/* Hint de descuento mayorista para visitantes minoristas:
   "Desde 6 uds. -X%". Promete sin revelar el precio mayorista. */
.card-mayorista-hint {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
  background: rgba(255, 122, 24, .08);
  border: 1px solid rgba(255, 122, 24, .25);
  border-radius: 6px;
  padding: 3px 8px;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
}
.card-meta-dot { width: 4px; height: 4px; border-radius: 999px; background: var(--ok); }
.card-meta-dot.low { background: #c27500; }
.grid[data-style="list"] {
  grid-template-columns: 1fr;
  gap: 10px;
}
.grid[data-style="list"] .card {
  flex-direction: row;
  align-items: center;
}
.grid[data-style="list"] .card-media { width: 120px; aspect-ratio: 1 / 1; flex-shrink: 0; }
.grid[data-style="list"] .card-body { flex-direction: row; align-items: center; gap: 20px; flex: 1; padding: 16px 24px; }
.grid[data-style="list"] .card-name { min-height: 0; -webkit-line-clamp: 1; flex: 1; }
.grid[data-style="list"] .card-price-row { margin-top: 0; }
.grid[data-style="list"] .card-meta { border: none; padding: 0; margin: 0; }
.grid[data-style="list"] .card-quick { position: static; opacity: 1; transform: none; width: auto; flex-shrink: 0; padding: 0 18px; }
.catgrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-bottom: 44px;
}
.cattile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 10px 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: 0.2s;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.cattile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--line-2);
}
.cattile-ico {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--accent);
  display: grid;
  place-items: center;
  color: #fff;
  z-index: 2;
  box-shadow: 0 2px 5px rgba(232, 98, 44, 0.35);
}
.cattile-ico svg { width: 13px; height: 13px; stroke-width: 2; }
.cattile-photo {
  width: 100%;
  height: 88px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  /* Gradiente de marca SIEMPRE de fondo: si el rubro tiene foto cargada, la
     <img> (z-index 1) lo tapa; si no, queda el gradiente + el icono grande
     centrado -> el tile se ve disenado, no un recuadro pelado. */
  background: linear-gradient(135deg, #ff8a3d 0%, #e8622c 100%);
}
.cattile-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
/* Icono grande del rubro, centrado, visible cuando NO hay foto. */
.cattile-photo-ico {
  width: 40px;
  height: 40px;
  color: rgba(255, 255, 255, 0.92);
  stroke-width: 1.6;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
  z-index: 0;
}
.cattile-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  margin-top: 2px;
}
.cattile-count {
  font-size: 11.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.testimonials {
  background: var(--ink);
  color: #F3EEE6;
  padding: 72px 0;
}
.testi-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  gap: 24px;
}
.testi-head .section-title { color: #F3EEE6; }
.testi-head .section-title em { color: var(--accent); }
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.testi-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.testi-stars {
  display: flex;
  gap: 2px;
  color: var(--accent);
  margin-bottom: 16px;
}
.testi-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.4;
  margin: 0 0 22px;
  letter-spacing: -0.005em;
  color: #F3EEE6;
}
.testi-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testi-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), #b4431a);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  color: white;
}
.testi-author-name {
  font-size: 14px;
  font-weight: 600;
  color: #F3EEE6;
}
.testi-author-role {
  font-size: 12px;
  color: rgba(243, 238, 230, 0.55);
  margin-top: 2px;
}
.ctaband {
  padding: 72px 0;
  background: var(--bg-2);
}
.ctaband-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 64px;
  background: var(--accent);
  color: white;
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
}
.ctaband-inner::before {
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.ctaband-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin: 0;
  color: white;
  position: relative;
  text-wrap: balance;
}
.ctaband-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: white;
}
.ctaband-desc {
  font-size: 17px;
  color: rgba(255,255,255,0.92);
  margin: 18px 0 0;
  line-height: 1.5;
  max-width: 56ch;
  position: relative;
}
.ctaband-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.ctaband-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ctaband-info {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: white;
  position: relative;
}
.ctaband-info-ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.18);
  display: grid;
  place-items: center;
  color: white;
  flex-shrink: 0;
}
.ctaband-info-title {
  font-size: 13.5px;
  font-weight: 700;
  color: white;
}
.ctaband-info-desc {
  font-size: 12.5px;
  color: rgba(255,255,255,0.78);
  margin-top: 2px;
}
/* Botones del CTA naranja: primary va a fondo negro, ghost queda blanco. */
.ctaband-inner .btn-primary { background: var(--ink); color: white; }
.ctaband-inner .btn-primary:hover { background: white; color: var(--ink); }
.ctaband-inner .btn-ink { background: white; color: var(--ink); }
.ctaband-inner .btn-ink:hover { background: var(--ink); color: white; }
.footer {
  background: var(--ink);
  color: rgba(243, 238, 230, 0.7);
  padding: 72px 0 28px;
  font-size: 14px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand { max-width: 320px; }
.footer-brand-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.footer-brand-top img { width: 44px; height: 44px; object-fit: contain; filter: brightness(1.1); }
.footer-brand-name {
  font-family: var(--font-display);
  font-size: 20px;
  color: #F3EEE6;
}
.footer-brand-desc { line-height: 1.5; font-size: 13.5px; }
.footer-h {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(243, 238, 230, 0.4);
  font-weight: 600;
  margin: 0 0 16px;
}
.footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-list a { color: rgba(243, 238, 230, 0.75); transition: 0.15s; font-size: 13.5px; }
.footer-list a:hover { color: var(--accent); }
.footer-hours { font-size: 13.5px; line-height: 1.7; }
.footer-hours b { color: #F3EEE6; }
.footer-bottom {
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(243, 238, 230, 0.4);
}
.footer-bottom-links { display: flex; gap: 24px; }
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(25, 22, 19, 0.5);
  backdrop-filter: blur(3px);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: 0.25s;
}
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 100vw;
  background: var(--surface);
  z-index: 101;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  padding: 22px 28px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer-title {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.drawer-title span {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
}
.drawer-close {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--ink-3);
}
.drawer-close:hover { background: var(--bg-2); color: var(--ink); }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px 28px; }
.drawer-foot {
  border-top: 1px solid var(--line);
  padding: 22px 28px;
  background: var(--surface);
}
.cart-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--ink-3);
}
.cart-empty-ico {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: var(--bg-2);
  display: grid;
  place-items: center;
  color: var(--ink-3);
}
.cart-empty h4 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.cart-empty p { font-size: 14px; margin: 0; }
.cart-item {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.cart-item-media {
  width: 74px;
  height: 74px;
  border-radius: 10px;
  background: var(--bg-2);
  display: grid;
  place-items: center;
}
.cart-item-name {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  line-height: 1.35;
}
.cart-item-cat {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cart-qty {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-top: 8px;
  background: var(--bg-2);
  border-radius: 999px;
  padding: 2px;
}
.cart-qty button {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  font-size: 14px;
}
/* En mobile los botones +/- del carrito suben a 44px (WCAG 2.5.5) vía la
 * regla de cs-components — pero esa regla exige aria-label, que ahora
 * llevan (renderCart). Antes quedaban en 26px, casi imposibles de tocar. */
.cart-qty button:hover { background: var(--surface); }
.cart-qty span {
  min-width: 30px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cart-item-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}
.cart-item-price {
  font-size: 14.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cart-item-remove {
  font-size: 11.5px;
  color: var(--ink-3);
  padding: 4px 0;
}
.cart-item-remove:hover { color: var(--accent); }
.cart-ship-progress {
  background: linear-gradient(135deg, #fff5ec 0%, #ffeed8 100%);
  border: 1px solid #ffd9b3;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.cart-ship-progress.done {
  background: linear-gradient(135deg, #e6fff2 0%, #ccffe1 100%);
  border-color: #99e6bb;
}
.cart-ship-msg {
  font-size: 13px;
  color: #7a3c0e;
  margin-bottom: 8px;
}
.cart-ship-progress.done .cart-ship-msg { color: #0e6b3a; }
.cart-ship-bar {
  height: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.cart-ship-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #f97316);
  border-radius: 999px;
  transition: width .35s ease;
}
.cart-ship-progress.done .cart-ship-bar-fill {
  background: linear-gradient(90deg, #22c55e, #16a34a);
}
.qty-seo-desc {
  background: #fdf6e3;
  border-left: 3px solid var(--accent);
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-bottom: 16px;
}
.cart-summary { font-size: 13.5px; color: var(--ink-3); margin-bottom: 14px; }

/* Vistos recientemente: sección entre hero y catálogo */
.section-recent { padding-top: 24px; padding-bottom: 8px; }
.section-recent .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.section-recent .card { font-size: 13px; }

/* Cross-sell dentro del modal de cantidad */
.modal-related {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.modal-related-h {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  color: var(--ink-2);
}
.modal-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.related-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 10px 12px;
  cursor: pointer;
  transition: transform .12s, border-color .12s;
}
.related-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}
.related-img {
  width: 100%;
  aspect-ratio: 1;
  background: var(--surface);
  border-radius: 8px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  overflow: hidden;
  font-size: 24px;
}
.related-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.related-name {
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 4px;
  font-weight: 500;
}
.related-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-display);
}
@media (max-width: 600px) {
  .modal-related-grid { grid-template-columns: repeat(2, 1fr); }
}
.cart-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}
.cart-row.total {
  border-top: 1px solid var(--line);
  margin-top: 10px;
  padding-top: 14px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
}
.cart-row.total .big {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: -0.01em;
}
.cart-ctas { display: flex; gap: 8px; }
.cart-ctas .btn { flex: 1; height: 50px; }
.cart-save {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  margin-bottom: 14px;
}
.modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(25, 22, 19, 0.55);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
  padding: 24px;
}
.modal-scrim.open { opacity: 1; pointer-events: auto; }
.modal {
  width: 560px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius-xl);
  transform: translateY(20px) scale(0.96);
  transition: 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.modal-scrim.open .modal { transform: translateY(0) scale(1); }
.modal-head {
  padding: 28px 32px 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.modal-title {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: -0.015em;
  margin: 0;
}
.modal-sub {
  font-size: 14px;
  color: var(--ink-3);
  margin: 6px 0 0;
}
.modal-body { padding: 20px 32px 32px; }

/* ---------- Modal de detalle de producto + cross-sell ---------- */
.modal-detail { width: 880px; position: relative; }
.modal-detail .modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px;
  border: 0; border-radius: 999px;
  background: rgba(0, 0, 0, .55); color: #fff;
  display: grid; place-items: center;
  cursor: pointer; z-index: 5;
  transition: .15s;
}
.modal-detail .modal-close:hover { background: rgba(0, 0, 0, .8); transform: scale(1.05); }
.detail-loader {
  padding: 80px 32px; text-align: center; color: var(--ink-3);
}
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 32px;
}
.detail-foto {
  aspect-ratio: 1;
  background: var(--surface-2, #faf6ee);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.detail-foto img { width: 100%; height: 100%; object-fit: contain; }
.detail-foto .ph { width: 100%; height: 100%; }
.detail-info { display: flex; flex-direction: column; gap: 10px; }
.detail-rubro {
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-3);
}
.detail-nombre {
  font-family: var(--font-display);
  font-size: 26px; line-height: 1.2; margin: 0;
}
.detail-cod {
  font-size: 12px; color: var(--ink-3); margin-top: -4px;
}
.detail-precio {
  font-family: var(--font-display);
  font-size: 36px; font-weight: 700;
  color: var(--brand);
  margin-top: 6px;
}
.detail-mayorista {
  font-size: 13px;
  background: rgba(255, 122, 24, .08);
  border: 1px solid rgba(255, 122, 24, .25);
  border-radius: 8px;
  padding: 8px 12px;
}
.detail-stock {
  font-size: 13px; font-weight: 600;
  margin-top: 6px;
}
.detail-stock-ok { color: var(--ok); }
.detail-stock-low { color: #c27500; }
.detail-stock-zero { color: var(--err, #c0392b); }
.detail-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.detail-actions .btn-primary { flex: 1 1 200px; }
.btn.btn-share {
  background: #25D366; color: #fff; border: 0;
  padding: 11px 18px; border-radius: 999px;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; cursor: pointer;
}
.btn.btn-share:hover { background: #1eb756; }

/* Cross-sell */
.detail-rel {
  border-top: 1px solid var(--line);
  padding: 24px 32px 32px;
}
.detail-rel-titulo {
  font-weight: 600; font-size: 14px;
  margin-bottom: 14px;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-2);
}
.detail-rel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.detail-rel-card {
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: .15s;
}
.detail-rel-card:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}
.detail-rel-foto {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2, #faf6ee);
}
.detail-rel-foto img { width: 100%; height: 100%; object-fit: contain; }
.detail-rel-foto .ph { width: 100%; height: 100%; }
.detail-rel-nombre {
  font-size: 12px; line-height: 1.3;
  padding: 8px 10px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.detail-rel-precio {
  font-family: var(--font-display);
  font-weight: 700; font-size: 14px;
  padding: 4px 10px 10px;
  color: var(--brand);
}

@media (max-width: 760px) {
  .modal-detail { width: 100%; }
  .detail-grid { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .detail-nombre { font-size: 22px; }
  .detail-precio { font-size: 28px; }
  .detail-rel { padding: 18px 20px 24px; }
}
.field { margin-bottom: 16px; }
.field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.field-input, .field-textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg);
  font-size: 14.5px;
  transition: 0.15s;
}
.field-input:focus, .field-textarea:focus {
  outline: none;
  border-color: var(--ink);
  background: white;
}
.field-textarea { resize: vertical; min-height: 72px; }
.radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.radio-card {
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: 0.15s;
  display: flex;
  align-items: center;
  gap: 12px;
}
.radio-card:hover { border-color: var(--ink); }
.radio-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
}
.radio-card.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.radio-card-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid var(--line-2);
  flex-shrink: 0;
  position: relative;
  transition: 0.15s;
}
.radio-card.active .radio-card-dot {
  border-color: var(--accent);
  background: var(--accent);
}
.radio-card.active .radio-card-dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: white;
  border-radius: 999px;
}
.radio-card-text { font-size: 13.5px; font-weight: 600; }
.radio-card-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; font-weight: 400; }
.welcome-scrim {
  position: fixed;
  inset: 0;
  background: rgba(25, 22, 19, 0.55);
  backdrop-filter: blur(4px);
  z-index: 150;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: 0.25s;
  padding: 24px;
}
.welcome-scrim.open { opacity: 1; pointer-events: auto; }
.welcome {
  width: 440px;
  max-width: 100%;
  background: var(--ink);
  color: #F3EEE6;
  border-radius: var(--radius-xl);
  padding: 44px 40px;
  position: relative;
  transform: scale(0.94);
  transition: 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
.welcome-scrim.open .welcome { transform: scale(1); }
.welcome::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
}
.welcome-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: rgba(255,255,255,0.6);
  display: grid;
  place-items: center;
}
.welcome-close:hover { color: white; background: rgba(255,255,255,0.1); }
.welcome-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  position: relative;
}
.welcome-title {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 12px 0 8px;
  position: relative;
}
.welcome-title em { color: var(--accent); font-style: normal; }
.welcome-sub {
  font-size: 14px;
  color: rgba(243, 238, 230, 0.7);
  margin: 0 0 22px;
  position: relative;
}
.welcome-code {
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.1em;
  background: rgba(232, 98, 44, 0.15);
  border: 1px dashed var(--accent);
  padding: 14px;
  border-radius: 12px;
  text-align: center;
  margin-bottom: 16px;
  position: relative;
  color: var(--accent);
  font-weight: 500;
}
.welcome .btn { width: 100%; height: 52px; position: relative; }
.fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #25D366;
  color: white;
  padding: 12px 18px 12px 14px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
  font-size: 13.5px;
  font-weight: 600;
  transition: 0.2s;
}
.fab:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(37, 211, 102, 0.5); }
/* Un solo boton flotante de chat (pedido de Fede: "dejamos solo 1").
   Canal unico = WhatsApp (#wa-fab). Se oculta el launcher de MAXX para que
   no se superponga. El resto del bundle MAXX (reviews, tracking, PWA,
   recuperacion de carrito) sigue activo — esto solo saca el boton visible.
   Revertir = borrar esta regla. */
#maxx-fab { display: none !important; }
/* (bloque .tweaks-panel / .tweak-* eliminado: panel viejo sin ningun nodo que lo use) */
.tweaks-close {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--ink-3);
  display: grid;
  place-items: center;
  font-size: 16px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
.ph-media {
  width: 70%;
  height: 70%;
  display: grid;
  place-items: center;
  border-radius: 12px;
  opacity: 0.55;
}
.ph-emoji { font-size: 48px; }

/* Skeleton para imagenes de producto mientras cargan. El JS le saca
   la clase .img-skeleton en el onload — entonces la animacion solo
   se ve antes de que la foto haya bajado. Si el browser sirve la
   imagen desde cache, el onload dispara casi al instante y el
   skeleton ni se nota. */
.img-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.12) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: img-skeleton-shimmer 1.6s ease-in-out infinite;
}
@keyframes img-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-side { grid-template-rows: auto auto; grid-template-columns: 1fr 1fr; }
  .plist { grid-template-columns: 1fr; }
  .filters { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .catgrid { grid-template-columns: repeat(3, 1fr); }
  .testi-grid { grid-template-columns: 1fr; }
  /* .trust-grid: las columnas responsive las define el bloque dedicado
     (repeat(3) <=1024, repeat(2) <=640). No re-declarar aca — pisaba el
     repeat(3) con 2 columnas y rompia la fila de 5. */
  .ctaband-inner { grid-template-columns: 1fr; padding: 36px; }
  .search { max-width: 100%; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 18px; }
  .hero-main { padding: 36px 28px; }
  .hero-side { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .catgrid { grid-template-columns: 1fr 1fr; }
  /* Header en 2 filas en mobile: (marca | acciones) arriba, buscador
     full-width abajo. Antes el buscador estaba OCULTO en el celular, asi que
     el cliente no tenia como buscar entre 1230 productos desde el telefono
     (era la friccion de conversion #1 del analisis). */
  .header-inner {
    grid-template-columns: auto 1fr;
    grid-template-areas: "brand actions" "search search";
    height: auto;
    padding: 10px 0;
    row-gap: 10px;
    column-gap: 12px;
  }
  .brand { grid-area: brand; }
  .header-actions { grid-area: actions; justify-self: end; }
  .search { grid-area: search; display: flex; max-width: 100%; }
  .search-hint { display: none; }
  .brand-tag { display: none; }
}
/* Hero dinamico — carousel horizontal */
.hero-main { position: relative; overflow: hidden; padding: 0; }
.hero-slides {
  display: flex;
  width: 100%;
  min-height: inherit;
  height: 100%;
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  z-index: 1;
}
.hero-slide {
  flex: 0 0 100%;
  min-width: 100%;
  min-height: 480px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero-slide.tipo-texto {
  padding: 52px 56px;
  background: linear-gradient(135deg, #1c1917 0%, #2a2420 100%);
  color: #F3EEE6;
}
.hero-slide.tipo-texto::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(circle at 85% 20%, var(--accent-glow) 0%, transparent 50%),
    radial-gradient(circle at 15% 90%, rgba(232, 98, 44, 0.08) 0%, transparent 40%);
  pointer-events: none;
}
.hero-slide.tipo-texto > * { position: relative; z-index: 1; }
.hero-slide.tipo-texto .hero-bg-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.45; pointer-events: none;
}
/* tipo-completo = banner subido por Fede. `contain` (no `cover`) para que
   NUNCA se recorte el banner — se ve entero y centrado. El fondo oscuro
   (mismo gradiente que las slides de texto) rellena el sobrante si el
   banner no calza exacto, en vez de dejar barras blancas. */
.hero-slide.tipo-completo {
  padding: 0;
  background: linear-gradient(135deg, #1c1917 0%, #2a2420 100%);
}
.hero-slide.tipo-completo > a,
.hero-slide.tipo-completo > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.hero-slide.tipo-completo img { object-fit: contain; object-position: center; }
.hero-slide.tipo-completo > a img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.hero-main .hero-meta {
  position: absolute; bottom: 36px; left: 56px; right: 56px;
  z-index: 3; pointer-events: none;
}
.hero-dots {
  position: absolute; bottom: 18px; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex; gap: 8px;
  background: rgba(25, 22, 19, 0.4);
  backdrop-filter: blur(4px);
  padding: 6px 10px; border-radius: 999px;
}
.hero-dots button {
  width: 8px; height: 8px; border-radius: 999px;
  background: rgba(243, 238, 230, 0.4); border: none; cursor: pointer;
  transition: 0.25s; padding: 0;
}
.hero-dots button.active { background: var(--accent); width: 22px; border-radius: 4px; }
.hero-dots button:hover { background: rgba(243, 238, 230, 0.7); }
.mayorista-bar { background: var(--accent-ink); color: #fff; padding: 8px 16px; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; display: none; }
.mayorista-bar.active { display: block; }
.mayorista-bar b { color: #fff; }
.mayorista-bar .x-close { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; background: rgba(255,255,255,.2); margin-left: 8px; font-size: 11px; cursor: pointer; }
.hbtn.active { background: var(--accent); color: #fff; }
.hbtn.active:hover { background: var(--accent-ink); }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 999px; animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.catgrid.dense { grid-template-columns: repeat(8, 1fr); }
.card-media img { width: 100%; height: 100%; object-fit: contain; padding: 12px; background: #fff; }
.card-quick { cursor: pointer; border: none; }
.grid-empty { text-align: center; padding: 80px 20px; color: var(--ink-3); font-size: 15px; }

/* Skeleton shimmer mientras carga la grilla. Misma forma que .card para
   que el layout no salte cuando entran los datos. */
.card-skel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.card-skel-media { width: 100%; aspect-ratio: 1; }
.card-skel-body { padding: 14px 16px 16px; }
.card-skel-line { border-radius: 4px; }
.shimmer {
  background: linear-gradient(90deg,
              rgba(0,0,0,.04) 0%,
              rgba(0,0,0,.08) 50%,
              rgba(0,0,0,.04) 100%);
  background-size: 200% 100%;
  animation: shimmer-slide 1.4s ease-in-out infinite;
}
@keyframes shimmer-slide {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) { .shimmer, .img-skeleton { animation: none; } }

.load-more-wrap { text-align: center; margin-top: 32px; }
.toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #F3EEE6; padding: 12px 20px; border-radius: 999px; font-size: 13.5px; font-weight: 600; z-index: 300; opacity: 0; pointer-events: none; transition: 0.25s; box-shadow: var(--shadow-lg); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
#productos { scroll-margin-top: 140px; }
@media (max-width: 640px) {
  /* Ocultar TODOS los labels de los botones del header en mobile (antes solo
     mayorista/WhatsApp): con "Ingresar" y "Carrito" visibles, 4 botones + marca
     no entran en <400px y la página scrolleaba de costado. Los labels están en
     el bottom-nav igual. */
  .header-actions .hbtn-txt { display: none; }
  .announce-meta { display: none; }
  /* El slide de texto tenía padding 52px 56px sin reducción mobile → sobre
     360px los 2 CTAs no entraban y hero-main (overflow:hidden) los recortaba. */
  .hero-slide.tipo-texto { padding: 32px 20px; }
  .hero-meta { flex-wrap: wrap; gap: 20px; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .ctaband-inner { padding: 28px 20px; }

  /* En mobile el FAB de WhatsApp ocupa mucho ancho con el texto
     "Consultar" + se apila con MAXX arriba (bottom: 84px). Reducimos
     a icono solo + ajustamos posicion para no superponerse. */
  .fab {
    bottom: 18px; right: 18px;
    padding: 12px;
    gap: 0;
    font-size: 0;
  }
  .fab svg { width: 24px; height: 24px; }
}

/* ===== Bundles publicos (packs/combos) ===== */
.bundles-section { margin: 40px 0; padding: 0 16px; }
.bundles-header { margin-bottom: 18px; }
.bundles-title {
  font-size: 22px; font-weight: 700; margin: 0 0 4px 0;
  color: var(--ink);
}
.bundles-sub { margin: 0; color: var(--ink-3); font-size: 14px; }
.bundles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.bundle-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: 0.15s;
  position: relative;
}
.bundle-card:hover {
  border-color: var(--accent, #f5b51d);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.2));
}
.bundle-media {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, rgba(245,181,29,0.08), rgba(251,146,60,0.08));
  position: relative;
  overflow: hidden;
}
.bundle-media img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.bundle-badge-ahorro {
  position: absolute; top: 10px; right: 10px;
  background: var(--accent, #f5b51d);
  color: var(--accent-ink, #1a1300);
  padding: 4px 10px; border-radius: 14px;
  font-size: 12px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.bundle-badge-pack {
  position: absolute; top: 10px; left: 10px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 3px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  backdrop-filter: blur(4px);
}
.bundle-body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.bundle-name {
  font-size: 15px; font-weight: 600; color: var(--ink);
  margin: 0; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.bundle-desc {
  font-size: 12px; color: var(--ink-3);
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.bundle-items-mini {
  font-size: 11.5px; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.bundle-prices {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: auto; padding-top: 8px;
  border-top: 1px solid var(--line);
}
.bundle-price-final {
  font-size: 20px; font-weight: 700; color: var(--ink);
}
.bundle-price-orig {
  font-size: 13px; color: var(--ink-3);
  text-decoration: line-through;
}
.bundle-footer {
  padding: 0 16px 14px 16px;
}
.bundle-add-btn {
  width: 100%; padding: 10px;
  background: var(--accent, #f5b51d); color: var(--accent-ink, #1a1300);
  border: none; border-radius: 8px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: 0.15s;
}
.bundle-add-btn:hover { filter: brightness(1.05); }
.bundle-add-btn:disabled { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 720px) {
  .bundles-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
  .bundle-name { font-size: 14px; }
  .bundle-price-final { font-size: 18px; }
}

/* ── Override de contraste del banner mayorista ──────────────────────
 * .cs-banner-cta (compartido con admin) pinta el texto con var(--accent-ink),
 * que en la tienda es #c2410c (naranja) → 1.5-3.4:1 sobre el gradiente naranja
 * del banner = ilegible. cs-components.css carga después, así que ganamos por
 * id. Ink oscuro que pasa AA en todo el gradiente (naranja→amarillo). */
#cs-cta-mayorista { color: #221a10; }
#cs-cta-mayorista u { text-decoration-color: #221a10; }
/* El botón "Crear cuenta" (.cs-banner-cta__action) NO se toca: es fondo
 * oscuro con texto naranja, que ya tiene buen contraste. */