/* Components — Regalos Bakanos: botones, tarjetas, badges, formularios,
   modales, acordeón, slider, lightbox, barra fija, rating, contador */

/* Tamaños explícitos de íconos (el default global es 1em, aquí se ajusta por contexto) */
.header-icon-btn svg { width: 20px; height: 20px; }
.product-card-fav svg { width: 18px; height: 18px; }
.benefit-card .icon svg { width: 28px; height: 28px; }
.trust-item .icon svg { width: 20px; height: 20px; }
.qty-stepper button svg { width: 16px; height: 16px; }
.popup-btn svg { width: 18px; height: 18px; }
.lightbox-close svg, .lightbox-nav svg { width: 20px; height: 20px; }
.search-form button svg { width: 18px; height: 18px; }
.gallery-main .header-icon-btn svg { width: 18px; height: 18px; }

/* ══════════════ Botones ══════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-cta); }
.btn-primary:hover { background: var(--color-primary-dark); color: #fff; }

.btn-secondary { background: #fff; color: var(--color-ink); border: 1.5px solid var(--color-border); }
.btn-secondary:hover { border-color: var(--color-ink); color: var(--color-ink); }

.btn-whatsapp { background: #25D366; color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }
.btn-whatsapp:hover { background: #1EBE5A; color: #fff; }

.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--fs-md); }
.btn-block { width: 100%; }

/* CTA con animación de zoom pulsante */
.btn-cta-zoom { animation: cta-pulse 2.2s ease-in-out infinite; }
@keyframes cta-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

/* Botón navbar con chispas — el contenedor debe ser position:relative */
.btn-sparkle { position: relative; overflow: visible; }
.sparkle-dot { position: absolute; pointer-events: none; }
@keyframes sparkle-up {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-22px) scale(0.4); }
}

/* ══════════════ Badges ══════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 4px 10px; border-radius: var(--radius-full);
  text-transform: uppercase;
}
.badge-nuevo      { background: var(--cat-tecnologia-soft); color: var(--cat-tecnologia); }
.badge-vendido     { background: var(--color-secondary-light); color: var(--color-secondary-dark); }
.badge-oferta      { background: var(--color-primary-light); color: var(--color-primary-dark); }
.badge-envio       { background: var(--color-success-soft); color: var(--color-success); }
.badge-seguro      { background: var(--color-bg-soft); color: var(--color-ink-faint); }
.badge-stock-bajo  { background: var(--color-danger-soft); color: var(--color-danger); }

.product-badges { display: flex; flex-wrap: wrap; gap: 6px; }

/* ══════════════ Rating (estrellas) ══════════════ */
.rating { display: inline-flex; align-items: center; gap: 4px; }
.rating .stars { display: inline-flex; gap: 1px; color: var(--color-star); }
.rating .count { font-size: var(--fs-xs); color: var(--color-text-secondary); }

/* ══════════════ Tarjeta de producto ══════════════ */
.product-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
  display: flex; flex-direction: column;
}
.product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: transparent; }

.product-card-media { position: relative; aspect-ratio: 1 / 1; background: var(--color-bg-soft); overflow: hidden; }
.product-card-media img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--transition-slow); }
.product-card:hover .product-card-media img { transform: scale(1.06); }

.product-card-quick-actions {
  position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2;
  display: flex; flex-direction: column; gap: 8px;
}
.product-card-fav {
  width: 36px; height: 36px; border-radius: var(--radius-full);
  background: rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center;
  border: none; color: var(--color-ink-faint);
  transition: color var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}
.product-card-fav:hover { transform: scale(1.1); }
.product-card-fav.active { color: #fff; background: var(--color-primary); animation: fav-pop 0.3s ease; }
.product-card-fav.active svg { fill: currentColor; }
@keyframes fav-pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

.product-card-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.product-card-cat { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.product-card-title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--color-ink); line-height: 1.35; min-height: 2.7em; }
.product-card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); margin-top: auto; }
.product-card-price .now { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); color: var(--color-ink); }
.product-card-price .before { font-size: var(--fs-sm); color: var(--color-text-secondary); text-decoration: line-through; }
.product-card-price .off { font-size: var(--fs-xs); font-weight: 700; color: var(--color-success); }
.product-card-stock { font-size: var(--fs-xs); color: var(--color-text-secondary); }
.product-card-stock.scarcity-bar { padding: 6px var(--space-2); font-size: var(--fs-xs); line-height: 1.2; gap: 4px var(--space-2); margin: 0; }
.product-card-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.product-card-actions .btn { flex: 1; min-width: 0; padding-inline: var(--space-2); padding-block: var(--space-2); font-size: var(--fs-xs); }

@media (max-width: 480px) {
  .product-card-actions { flex-direction: column; }
}

/* ══════════════ Estado vacío ══════════════ */
.empty-state {
  text-align: center;
  padding: var(--space-9) var(--space-5);
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  border: 1.5px dashed var(--color-border);
}
.empty-state .emoji { font-size: 2.6rem; margin-bottom: var(--space-3); }
.empty-state h3 { margin-bottom: var(--space-2); }
.empty-state p { max-width: 42ch; margin-inline: auto; }

/* ══════════════ Formularios ══════════════ */
.field { margin-bottom: var(--space-4); position: relative; }
.field label { display: block; font-weight: 600; font-size: var(--fs-sm); color: var(--color-ink); margin-bottom: var(--space-2); }
.field label .req { color: var(--color-primary); }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-primary); background: #fff; }
.field textarea { resize: vertical; min-height: 80px; }
.field select:disabled { opacity: 0.7; cursor: not-allowed; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }

.field-hint { font-size: var(--fs-xs); color: var(--color-text-secondary); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.field-hint.ok { color: var(--color-success); }
.field-hint.error { color: var(--color-danger); animation: shake 0.35s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.field.has-error input, .field.has-error select { border-color: var(--color-danger); }
.field.has-success input, .field.has-success select { border-color: var(--color-success); }

.field-suggestions {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 5;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); max-height: 220px; overflow-y: auto; display: none;
}
.field-suggestions.open { display: block; }
.field-suggestions button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: var(--space-2) var(--space-4); font-size: var(--fs-sm);
}
.field-suggestions button:hover { background: var(--color-bg-soft); }

/* Selector visual de variante (color/talla) */
.variant-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.variant-chip {
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border); background: #fff; font-size: var(--fs-sm); font-weight: 600;
  display: flex; align-items: center; gap: var(--space-2);
}
.variant-chip img { width: 22px; height: 22px; border-radius: var(--radius-full); object-fit: cover; }
.variant-chip.selected { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); }

.qty-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--color-border); border-radius: var(--radius-full); overflow: hidden; }
.qty-stepper button { width: 40px; height: 40px; background: var(--color-bg-soft); border: none; font-size: var(--fs-md); font-weight: 700; }
/* HALLAZGO 2026-08-27: el número no se veía en PC (Windows/Chrome-Edge) — el
   input type=number sin -webkit-appearance:none deja las flechas nativas de
   subir/bajar del sistema operativo, que en un campo de 48px aplastan el
   dígito contra ellas y lo dejan ilegible (se veía como ":"). Se ocultan las
   flechas nativas (ya sobran, hay botones −/+ propios) y se fija el color
   explícito en vez de depender de la herencia — más robusto entre navegadores. */
.qty-stepper input {
  width: 48px; height: 40px; line-height: 40px; text-align: center; border: none; background: none;
  font-weight: 700; color: var(--color-ink); -moz-appearance: textfield; appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Selector de packs (ej: pack x6 / pack x12) — tarjetas más grandes que el
   variant-chip porque cargan precio + ahorro, no solo una etiqueta corta. */
.pack-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.pack-chip {
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-4); border-radius: var(--radius-lg);
  border: 2px solid var(--color-border); background: #fff; cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.pack-chip.selected { border-color: var(--color-primary); background: var(--color-primary-light); }
.pack-chip strong { font-family: var(--font-display); font-size: var(--fs-md); color: var(--color-ink); }
.pack-price { font-weight: 700; color: var(--color-primary-dark); font-size: var(--fs-lg); }
.pack-ahorro { font-size: var(--fs-xs); color: var(--color-success); font-weight: 600; }
.pack-badge {
  position: absolute; top: -11px; right: var(--space-3);
  background: var(--color-primary); color: #fff; font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 10px; border-radius: var(--radius-full);
}

/* Resumen del pedido */
/* Selector combinado talla + color por rondas (packs de camisetas) */
.cb-progreso { font-size: var(--fs-sm); color: var(--color-text-secondary); margin-bottom: var(--space-3); }
.cb-bloque-actual { background: var(--color-bg-soft); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-3); }
.cb-tallas-mini { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.cb-colores { margin-top: var(--space-3); }
.cb-color-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-2);
  max-height: 320px; overflow-y: auto; padding: 2px 6px 2px 2px; margin-bottom: var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-soft);
  /* Con 160px mínimo por columna (antes 130px) el nombre del color ya no pelea por
     espacio con los botones +/-, que en PC quedaban apretadísimos junto a nombres
     largos como "Fucsia Fantasía" — hallazgo del operador 2026-08-27: en la versión
     de escritorio el selector de cantidad prácticamente no se veía.
     Scrollbar visible a propósito (antes dependía 100% del navegador/SO para mostrarla,
     y en Windows/Chrome puede quedar invisible hasta hacer hover) — con 37 colores en
     una caja de 320px, sin pista visual el cliente no sabía que debía desplazarse
     DENTRO de la caja para ver el resto. */
  scrollbar-width: thin; scrollbar-color: var(--color-primary) var(--color-bg-soft);
}
.cb-color-grid::-webkit-scrollbar { width: 8px; }
.cb-color-grid::-webkit-scrollbar-track { background: var(--color-bg-soft); border-radius: var(--radius-full); }
.cb-color-grid::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: var(--radius-full); }
/* Barra pegajosa: el botón de agregar y el contador de la ronda quedan siempre
   visibles debajo de la caja de colores (que sí se desplaza internamente),
   sin que el cliente tenga que bajar hasta el final de 37 colores para verlo. */
.cb-agregar-bar {
  position: sticky; bottom: 0; background: #fff; padding-top: var(--space-2);
  display: flex; flex-direction: column; gap: var(--space-2); z-index: 2;
}
.cb-agregar-info { font-size: var(--fs-sm); font-weight: 700; color: var(--color-primary-dark); text-align: center; }
.cb-color-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-1);
  background: #fff; border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-2); transition: border-color var(--transition-fast);
}
.cb-color-item.cb-activo { border-color: var(--color-primary); background: var(--color-primary-light); }
.cb-color-tap {
  display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0;
  background: none; border: none; padding: 4px; cursor: pointer; text-align: left;
}
.cb-swatch { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); }
.cb-color-name { font-size: var(--fs-xs); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-qty-badge { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.cb-qty-badge button {
  width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--color-border);
  background: var(--color-bg-soft); display: flex; align-items: center; justify-content: center;
}
.cb-qty-badge span { min-width: 16px; text-align: center; font-weight: 700; font-size: var(--fs-sm); }
.cb-resumen { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.cb-bloque-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  background: var(--color-primary-light); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3); font-size: var(--fs-sm);
}
.cb-bloque-item button { background: none; border: none; color: var(--color-danger); font-weight: 700; cursor: pointer; font-size: var(--fs-md); line-height: 1; padding: 4px; }

.order-summary { background: var(--color-bg-soft); border-radius: var(--radius-lg); padding: var(--space-5); }
.order-summary-item { display: flex; gap: var(--space-4); align-items: center; padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.order-summary-item img { width: 72px; height: 72px; border-radius: var(--radius-md); object-fit: contain; background: #fff; }
.order-summary-row { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--color-text-secondary); padding-block: 4px; }
.order-summary-row.total { font-weight: 800; color: var(--color-ink); font-size: var(--fs-md); border-top: 1px solid var(--color-border); margin-top: var(--space-2); padding-top: var(--space-3); }

/* ══════════════ Modales / Popups ══════════════ */
.popup-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(20, 20, 43, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  opacity: 0; visibility: hidden; transition: opacity var(--transition-base), visibility var(--transition-base);
}
.popup-overlay.visible { opacity: 1; visibility: visible; }
.popup-box {
  background: #fff; border-radius: var(--radius-xl); padding: var(--space-8);
  max-width: 440px; width: 100%; min-width: 0; text-align: center; position: relative;
  transform: scale(0.9); transition: transform var(--transition-base);
}
.popup-overlay.visible .popup-box { transform: scale(1); }
.popup-cerrar { position: absolute; top: var(--space-4); right: var(--space-4); background: var(--color-bg-soft); border: none; width: 34px; height: 34px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; }
.popup-cerrar svg { width: 16px; height: 16px; }
.popup-cerrar-lg { width: 44px; height: 44px; font-size: 1.3rem; font-weight: 700; color: var(--color-ink); }
.popup-icon { font-size: 3rem; margin-bottom: var(--space-3); }
.popup-btn { display: inline-flex; }
.popup-actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; justify-content: center; }
.popup-actions .btn { flex: 1; min-width: 140px; }

/* Modal del formulario de pedido (se abre al pulsar cualquier botón "Comprar") */
.order-modal-overlay { align-items: flex-start; overflow-y: auto; padding-block: var(--space-8); }
.order-modal-box { max-width: 560px; text-align: left; }
.order-modal-title { margin-bottom: var(--space-5); }

@media (max-width: 560px) {
  .popup-overlay { padding: var(--space-2); }
  .popup-box { padding: var(--space-5) var(--space-4); }
  .order-modal-overlay { padding-block: var(--space-4); }
}

/* ══════════════ Acordeón (FAQ) ══════════════ */
.accordion-item { border-bottom: 1px solid var(--color-border); }
.accordion-trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  background: none; border: none; text-align: left;
  padding: var(--space-5) 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-md); color: var(--color-ink);
}
.accordion-trigger .icon { flex-shrink: 0; transition: transform var(--transition-base); color: var(--color-primary); }
.accordion-item.open .accordion-trigger .icon { transform: rotate(45deg); }
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height var(--transition-slow); }
.accordion-panel-inner { padding-bottom: var(--space-5); color: var(--color-text-secondary); }

/* ══════════════ Tabs (especificaciones) ══════════════ */
.tabs-nav { display: flex; gap: var(--space-2); border-bottom: 2px solid var(--color-border); margin-bottom: var(--space-5); overflow-x: auto; }
.tabs-nav button { padding: var(--space-3) var(--space-5); background: none; border: none; font-weight: 600; color: var(--color-text-secondary); border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.tabs-nav button.active { color: var(--color-primary); border-color: var(--color-primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fade-in var(--transition-base); }
@keyframes fade-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }

/* ══════════════ Banner de descuentos + destacados del home ══════════════ */
.promo-banner {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-lg);
  background: linear-gradient(100deg, var(--color-primary), var(--color-primary-dark, #b8054f));
  color: #fff; box-shadow: var(--shadow-md);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.promo-banner:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.promo-banner-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-full); background: rgba(255,255,255,.18); white-space: nowrap;
}
.promo-banner-main { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.promo-banner-main strong { font-size: var(--fs-md); line-height: 1.15; }
.promo-banner-texto { font-size: var(--fs-xs); opacity: .9; }
.promo-banner-cta {
  font-size: var(--fs-sm); font-weight: 700; white-space: nowrap;
  padding: 8px 16px; border-radius: var(--radius-full);
  background: #fff; color: var(--color-primary);
}
@media (max-width: 640px) {
  .promo-banner { padding: var(--space-3) var(--space-4); gap: var(--space-2); }
  .promo-banner-eyebrow { display: none; }
  .promo-banner-texto { display: none; }
  .promo-banner-main strong { font-size: var(--fs-sm); }
  .promo-banner-cta { padding: 7px 14px; font-size: var(--fs-xs); }
}

.destacados-wrap { margin-top: var(--space-6); }
.destacados-titulo { font-size: var(--fs-3xl, 2.4rem); font-weight: 800; letter-spacing: -.01em; }
.destacados-slider .slider-slide { min-width: calc(100% / 3); padding: 0 var(--space-3); box-sizing: border-box; }
@media (max-width: 900px) { .destacados-slider .slider-slide { min-width: 50%; } }
@media (max-width: 600px) {
  .destacados-slider .slider-slide { min-width: 100%; }
  .destacados-titulo { font-size: var(--fs-2xl, 1.9rem); }
}

.ofertas-slider .slider-slide { min-width: 25%; padding: 0 var(--space-3); box-sizing: border-box; }
@media (max-width: 1000px) { .ofertas-slider .slider-slide { min-width: 33.333%; } }
@media (max-width: 720px) { .ofertas-slider .slider-slide { min-width: 50%; } }
@media (max-width: 460px) { .ofertas-slider .slider-slide { min-width: 100%; } }

/* ══════════════ Slider / Carrusel (hero + testimonios) ══════════════ */
.slider { position: relative; overflow: hidden; border-radius: var(--radius-xl); }
.slider-viewport { position: relative; overflow: hidden; border-radius: var(--radius-xl); }
.slider-track { display: flex; align-items: stretch; transition: transform var(--transition-slow); }
.slider-slide { min-width: 100%; display: flex; }
.slider-slide > * { flex: 1; width: 100%; min-width: 0; }
.slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--space-4); }
.slider-dots button { width: 9px; height: 9px; border-radius: 999px; background: var(--color-border); border: none; transition: background var(--transition-fast), width var(--transition-fast); }
.slider-dots button.active { background: var(--color-primary); width: 24px; }
.slider-arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 3;
  width: 40px; height: 40px; border-radius: var(--radius-full); border: 2px solid #fff;
  background: var(--color-primary); color: #fff; box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.slider-arrow svg { width: 20px; height: 20px; }
.slider-arrow:hover { background: var(--color-primary-dark); transform: scale(1.06); }
.slider-arrow.prev { left: var(--space-3); }
.slider-arrow.next { right: var(--space-3); }

.testimonial-card { background: var(--color-bg-soft); border-radius: var(--radius-lg); padding: var(--space-6); height: 100%; }
.testimonial-stars { color: var(--color-star); margin-bottom: var(--space-3); }
.testimonial-quote { font-style: italic; color: var(--color-ink); }
.testimonial-author { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.testimonial-author img { width: 42px; height: 42px; border-radius: var(--radius-full); object-fit: cover; }
.testimonial-author strong { display: block; font-size: var(--fs-sm); }
.testimonial-author span { font-size: var(--fs-xs); color: var(--color-text-secondary); }

/* ══════════════ Lightbox / Galería con zoom ══════════════ */
.gallery-main { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-soft); cursor: zoom-in; }
.gallery-main img { width: 100%; aspect-ratio: 1/1; object-fit: contain; }
.gallery-thumbs { display: flex; gap: var(--space-3); margin-top: var(--space-4); overflow-x: auto; padding-bottom: 4px; }
.gallery-thumbs button { flex-shrink: 0; width: 76px; height: 76px; border-radius: var(--radius-md); border: 2px solid var(--color-border); overflow: hidden; padding: 0; background: var(--color-bg-soft); }
.gallery-thumbs button.active { border-color: var(--color-primary); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; }

/* Video del producto: los clips de redes son verticales, así que se centra y se
   limita por altura en vez de estirarlo al ancho de la columna. */
.product-video { display: flex; justify-content: center; background: var(--color-bg-soft); border-radius: var(--radius-lg); overflow: hidden; }
.product-video video { display: block; width: auto; max-width: 100%; max-height: 520px; }

.lightbox-overlay {
  position: fixed; inset: 0; z-index: var(--z-lightbox); background: rgba(20,20,43,0.92);
  display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}
.lightbox-overlay.visible { opacity: 1; visibility: visible; }
.lightbox-overlay img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: var(--radius-md); }
.lightbox-close { position: absolute; top: var(--space-5); right: var(--space-5); width: 44px; height: 44px; border-radius: var(--radius-full); background: rgba(255,255,255,0.15); border: none; color: #fff; }
.lightbox-nav {
  position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-primary) 55%, transparent); border: none; color: #fff;
  transition: background var(--transition-fast);
}
.lightbox-nav:hover { background: var(--color-primary); }
.lightbox-nav.prev { left: var(--space-5); }
.lightbox-nav.next { right: var(--space-5); }

/* ══════════════ Barra fija de compra (landing de producto) ══════════════ */
.sticky-buy-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-sticky-bar);
  background: #fff; border-top: 1px solid var(--color-border); box-shadow: 0 -8px 24px rgba(20,20,43,0.08);
  padding: var(--space-3) var(--space-5);
  display: flex; align-items: center; gap: var(--space-4);
  translate: 0 100%; transition: translate var(--transition-base);
}
.sticky-buy-bar.visible { translate: 0 0; }
.sticky-buy-bar img { width: 48px; height: 48px; border-radius: var(--radius-sm); object-fit: contain; background: var(--color-bg-soft); flex-shrink: 0; }
.sticky-buy-bar .info { flex: 1; min-width: 0; }
.sticky-buy-bar .info strong { display: block; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-buy-bar .price { font-weight: 800; color: var(--color-primary); }

/* ══════════════ Barra de stock (escasez) — color según nivel ══════════════ */
.scarcity-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: 600; }
.scarcity-track { flex: 1 1 100%; min-width: 0; height: 6px; border-radius: 999px; background: #fff; overflow: hidden; }
.product-card-stock .scarcity-track { height: 5px; }
.scarcity-fill { height: 100%; border-radius: 999px; transition: width var(--transition-base); }

.scarcity-alto { background: var(--color-success-soft); color: var(--color-success); }
.scarcity-alto .scarcity-fill { background: var(--color-success); }

.scarcity-medio { background: #FFF9D6; color: #8A6D00; }
.scarcity-medio .scarcity-fill { background: #FFD500; }

.scarcity-bajo { background: var(--color-danger-soft); color: var(--color-danger); }
.scarcity-bajo .scarcity-fill { background: var(--color-danger); }

/* ══════════════ Iconos de confianza / beneficios ══════════════ */
.trust-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-6); }
.trust-item { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); font-weight: 600; color: var(--color-ink); }
.trust-item .icon { width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-primary-light); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.benefit-card { text-align: center; padding: var(--space-6); border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--color-border); transition: box-shadow var(--transition-base), transform var(--transition-base); }
.benefit-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.benefit-card .icon { width: 64px; height: 64px; margin-inline: auto; border-radius: var(--radius-full); background: var(--color-primary-light); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }

.step-card { display: flex; gap: var(--space-4); }
.step-card .num { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); color: var(--color-primary-light); -webkit-text-stroke: 1.5px var(--color-primary); flex-shrink: 0; }

/* ══════════════ Temporizador de la sección Ofertas ══════════════
   Cajas redondeadas por unidad (días/horas/min/seg) en el rosa de marca,
   número grande arriba y etiqueta pequeña debajo — mismo patrón que un
   countdown de Shopify, pero con la paleta de la tienda. */
.offer-countdown-wrap { display: flex; justify-content: center; margin: 0 0 var(--space-6); }
.offer-countdown { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.offer-countdown-label {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-sm); font-weight: 600; color: var(--color-ink);
}
.offer-countdown-label svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-primary); }
.offer-countdown-boxes { display: flex; align-items: center; gap: var(--space-3); }
.countdown-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  width: 64px; height: 64px;
  border-radius: var(--radius-lg);
  background: var(--color-primary-light);
  box-shadow: inset 0 0 0 2px var(--color-primary);
}
.countdown-box strong {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl);
  font-variant-numeric: tabular-nums; line-height: 1; color: var(--color-primary-dark);
}
.countdown-box span {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-primary);
}
@media (max-width: 640px) {
  .countdown-box { width: 52px; height: 52px; }
  .countdown-box strong { font-size: var(--fs-md); }
  .offer-countdown-boxes { gap: var(--space-2); }
  .offer-countdown-label { font-size: var(--fs-xs); text-align: center; }
}

/* ══════════════ Popup de compras recientes ══════════════ */
.compra-reciente-popup {
  position: fixed; left: var(--space-5); bottom: var(--space-5); z-index: var(--z-toast);
  max-width: 320px; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-4);
  opacity: 0; translate: 0 16px; pointer-events: none;
  transition: opacity var(--transition-base), translate var(--transition-base);
}
.compra-reciente-popup.visible { opacity: 1; translate: 0 0; pointer-events: auto; }
.compra-reciente-cerrar {
  position: absolute; top: var(--space-2); right: var(--space-2);
  background: none; border: none; color: var(--color-text-secondary); font-size: var(--fs-xs);
  width: 22px; height: 22px; border-radius: var(--radius-full); cursor: pointer;
}
.compra-reciente-cerrar:hover { background: var(--color-bg-soft); }
.compra-reciente-link { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--color-text); font-size: var(--fs-sm); line-height: 1.4; padding-right: var(--space-4); }
.compra-reciente-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1; }
@media (max-width: 640px) { .compra-reciente-popup { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); max-width: none; } }

/* ══════════════ "Ver más productos" (secciones del home) ══════════════ */
.grid-item-extra { display: none; }
.grid-productos.expandido .grid-item-extra { display: contents; }
.grid-ver-mas-wrap { display: flex; justify-content: center; margin-top: var(--space-7); }

/* ══════════════ Toast ══════════════ */
.toast-stack { position: fixed; top: var(--space-5); right: var(--space-5); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); }
.toast {
  background: var(--color-ink); color: #fff; padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md); font-size: var(--fs-sm); box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: var(--space-2);
  animation: toast-in var(--transition-base);
}
@keyframes toast-in { from { opacity: 0; translate: 40px 0; } to { opacity: 1; translate: 0 0; } }

/* ══════════════ Newsletter ══════════════ */
.newsletter-box {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  border-radius: var(--radius-lg); padding: var(--space-6) var(--space-6);
  color: #fff; text-align: center;
  max-width: 460px; margin-inline: auto;
}
.newsletter-box .icon { font-size: 1.5rem; display: block; margin-bottom: var(--space-2); }
.newsletter-box h2 { color: #fff; font-size: var(--fs-lg); max-width: 22ch; margin-inline: auto; }
.newsletter-box p { color: rgba(255,255,255,0.9); font-size: var(--fs-sm); max-width: 40ch; margin: var(--space-2) auto 0; }
.newsletter-form { display: flex; gap: var(--space-2); max-width: 380px; margin-inline: auto; margin-top: var(--space-4); }
.newsletter-form input { flex: 1; min-width: 0; border: none; border-radius: var(--radius-full); padding: var(--space-3) var(--space-5); font-size: var(--fs-sm); color: var(--color-ink); }
.newsletter-form button { padding-inline: var(--space-5); font-size: var(--fs-sm); white-space: nowrap; }
@media (max-width: 560px) {
  .newsletter-box { padding: var(--space-5) var(--space-4); }
  .newsletter-form { flex-direction: column; }
}

/* ══════════════ Skeleton / lazy placeholder ══════════════ */
.skeleton { background: linear-gradient(90deg, var(--color-bg-soft) 25%, var(--color-border-soft) 37%, var(--color-bg-soft) 63%); background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; }
@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }