/* ==========================================================================
   JN BIKERS · NAVEGACIÓN Y CATÁLOGO ESTILO MOTOCARD
   Inspirado en la arquitectura de www.motocard.com:
   - Header de alto contraste con buscador prominente y accesos rápidos
   - Botón MENÚ lateral con drawer de categorías completas
   - Modal interactivo "Añade tu moto" (Marca, Modelo, Año)
   - Barra horizontal de categorías y layout e-commerce con filtros laterales
   - Tarjetas de producto estilo Motocard (Badges, Wishlist, Estrellas rojas, PVPR)
   ========================================================================== */

/* --- 1. ENCABEZADO ESTILO MOTOCARD --- */
.motocard-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  min-height: 72px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.motocard-header__left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.motocard-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 8px 14px;
  color: #fff;
  cursor: pointer;
  font-family: var(--font-heading-family);
  font-weight: 800;
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  transition: all 0.22s ease;
}
.motocard-menu-btn:hover {
  background: rgba(0, 177, 221, 0.16);
  border-color: var(--color-primary);
  color: #00E5FF;
}

.motocard-logo,
.motocard-logo:focus,
.motocard-logo:focus-visible,
.motocard-logo__link,
.motocard-logo__link:focus,
.motocard-logo__link:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  text-decoration: none !important;
}

.motocard-logo img {
  width: 146px;
  max-width: 146px;
  height: auto;
  display: block;
}

.motocard-header__search {
  max-width: 620px;
  width: 100%;
}
.motocard-search-box {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  background: transparent !important;
  border: none !important;
  border-radius: 999px !important;
}
.motocard-search-box__icon {
  position: absolute;
  left: 14px;
  color: #94a3b8;
  pointer-events: none;
  display: flex;
}
.motocard-search-box input {
  width: 100%;
  padding: 11px 16px 11px 42px;
  border-radius: 999px;
  background: #111620;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.88rem;
  transition: all 0.25s ease;
  -webkit-appearance: none;
  appearance: none;
}
.motocard-search-box input:focus {
  outline: none;
  background: #161d2a;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 177, 221, 0.25);
}

.motocard-header__actions {
  display: flex;
  align-items: center;
  gap: 18px;
}
.motocard-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: transparent;
  border: none;
  color: #d1d5db;
  text-decoration: none;
  cursor: pointer;
  padding: 4px 6px;
  position: relative;
  transition: color 0.2s ease, transform 0.2s ease;
}
.motocard-action-btn span {
  font-family: var(--font-heading-family);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.motocard-action-btn:hover {
  color: #00E5FF;
  transform: translateY(-2px);
}
.motocard-badge {
  position: absolute;
  top: -2px;
  right: 0px;
  background: #FF1744;
  color: #fff;
  font-size: 0.64rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 16px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(255, 23, 68, 0.5);
}
.motocard-badge[data-count="0"], .motocard-badge:empty {
  display: none;
}

/* Sub-navegación horizontal Motocard */
.motocard-subnav {
  background: #06090e;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  position: relative;
  z-index: 10;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.motocard-subnav::-webkit-scrollbar {
  display: none;
}
.motocard-subnav__inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  white-space: nowrap !important;
  width: max-content !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 1366px) {
  .motocard-subnav__inner {
    gap: 4px !important;
    padding: 6px 8px !important;
  }
}
@media (max-width: 1100px) {
  .motocard-subnav__inner {
    justify-content: flex-start !important;
    padding: 8px 14px !important;
  }
}
.nav-text-short {
  display: inline !important;
}
.nav-text-full {
  display: none !important;
}
@media (min-width: 1800px) {
  .nav-text-short {
    display: none !important;
  }
  .nav-text-full {
    display: inline !important;
  }
}
.motocard-subnav__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-heading-family);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 1366px) {
  .motocard-subnav__link {
    padding: 5px 9px;
    font-size: 0.68rem;
    gap: 4px;
  }
}
.motocard-subnav__link:hover {
  color: #00E5FF;
  border-color: #00B1DD;
  background: rgba(0, 177, 221, 0.16);
  transform: translateY(-1px);
}
.motocard-subnav__link.is-active {
  color: #03141c !important;
  background: #00B1DD !important;
  border: 1px solid #00B1DD !important;
  font-weight: 800 !important;
  box-shadow: 0 0 14px rgba(0, 177, 221, 0.45) !important;
}
.motocard-subnav__link--promo {
  color: #FF5252 !important;
  background: rgba(229, 57, 53, 0.12) !important;
  border: 1px solid rgba(229, 57, 53, 0.4) !important;
  font-weight: 800;
}
.motocard-subnav__link--promo:hover {
  color: #ff7674 !important;
  background: rgba(229, 57, 53, 0.22) !important;
}

/* --- 2. DRAWER LATERAL DE MENÚ MOTOCARD --- */
.motocard-drawer {
  position: fixed;
  inset: 0;
  z-index: 150;
  visibility: hidden;
  transition: visibility 0.3s ease;
}
.motocard-drawer.is-open {
  visibility: visible;
}
.motocard-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.motocard-drawer.is-open .motocard-drawer__overlay {
  opacity: 1;
}
.motocard-drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 380px;
  background: #0b1017;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 10px 0 40px rgba(0, 0, 0, 0.7);
}
.motocard-drawer.is-open .motocard-drawer__panel {
  transform: translateX(0);
}
.motocard-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.motocard-drawer__close {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}
.motocard-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 0;
}
.motocard-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  color: #e2e8f0;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: all 0.2s ease;
}
.motocard-menu-item:hover {
  background: rgba(0, 177, 221, 0.12);
  color: #00E5FF;
  padding-left: 28px;
}
.motocard-menu-item__icon {
  font-size: 1.15rem;
  width: 24px;
  text-align: center;
}
.motocard-menu-item__text {
  flex: 1;
}
.motocard-menu-item__arrow {
  color: #64748b;
  font-size: 1.2rem;
}
.motocard-drawer__footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #080c12;
}
.motocard-drawer__moto-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: #94a3b8;
}

/* --- 3. MODAL "AÑADE TU MOTO" (CAPTURA 2 MOTOCARD) --- */
.motocard-moto-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: visibility 0.3s ease;
}
.motocard-moto-modal.is-open {
  visibility: visible;
}
.motocard-moto-modal .drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.motocard-moto-modal.is-open .drawer__overlay {
  opacity: 1;
}
.motocard-moto-dialog {
  position: relative;
  z-index: 2;
  background: #0d131d;
  color: #fff;
  border-radius: 16px;
  border: 1px solid rgba(0, 177, 221, 0.45);
  padding: 32px 30px;
  width: 92%;
  max-width: 480px !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 35px rgba(0, 177, 221, 0.2);
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.motocard-moto-modal.is-open .motocard-moto-dialog {
  transform: scale(1);
}
.motocard-dialog__close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 6px;
}
.motocard-dialog__close:hover {
  color: #fff;
}
.motocard-moto-dialog__head {
  text-align: center;
  margin-bottom: 24px;
}
.motocard-moto-dialog__icon {
  display: inline-flex;
  padding: 12px;
  background: rgba(0, 177, 221, 0.14);
  border-radius: 50%;
  color: #00E5FF;
  margin-bottom: 12px;
}
.motocard-moto-dialog__title {
  margin: 0 0 6px;
  font-size: 1.5rem;
  font-family: var(--font-heading-family);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.motocard-moto-dialog__sub {
  margin: 0;
  color: #94a3b8;
  font-size: 0.86rem;
  line-height: 1.5;
}
.motocard-moto-dialog__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.motocard-form-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #cbd5e1;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.motocard-form-group .step-num {
  background: #00B1DD;
  color: #000;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 900;
}
.motocard-form-group .select {
  width: 100% !important;
  background-color: #0b1325 !important;
  color: #f8fafc !important;
  border: 1px solid rgba(0, 177, 221, 0.45) !important;
  border-radius: 8px !important;
  padding: 11px 14px !important;
  font-size: 0.92rem !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.motocard-form-group .select:focus {
  border-color: #00e5ff !important;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.35) !important;
}
.motocard-form-group .select option {
  background-color: #0b1325 !important;
  color: #f8fafc !important;
  padding: 8px 12px !important;
}
.motocard-btn--search {
  margin-top: 8px;
  background: #FF1744 !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em;
  padding: 14px 20px !important;
  border: none !important;
}
.motocard-btn--search:hover {
  background: #d50000 !important;
  box-shadow: 0 8px 24px rgba(255, 23, 68, 0.4) !important;
}

/* Banner de moto activa sobre el catálogo */
.motocard-active-moto-banner {
  background: linear-gradient(135deg, rgba(0, 177, 221, 0.14) 0%, #090d14 100%);
  border: 1px solid rgba(0, 177, 221, 0.35);
  border-left: 5px solid #00B1DD;
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 177, 221, 0.12);
}
.active-moto-info {
  display: flex;
  align-items: center;
  gap: 14px;
}
.active-moto-icon {
  font-size: 1.8rem;
}
.active-moto-info strong {
  display: block;
  font-size: 0.98rem;
  color: #00E5FF;
}
.active-moto-info strong #ActiveMotoName {
  color: #ffffff;
  font-weight: 800;
}
.active-moto-info p {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: #94a3b8;
}
#BtnChangeActiveMoto {
  background: rgba(0, 177, 221, 0.14);
  border: 1px solid #00B1DD;
  color: #00E5FF;
  font-weight: 800;
  padding: 8px 18px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}
#BtnChangeActiveMoto:hover {
  background: #00B1DD;
  color: #03141c;
  box-shadow: 0 0 16px rgba(0, 177, 221, 0.5);
}

/* --- 4. BARRA DE CATEGORÍAS Y LAYOUT 2 COLUMNAS (CAPTURA 5 Y 6) --- */
.motocard-cat-pills {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.motocard-cat-pills::-webkit-scrollbar {
  display: none;
}
.motocard-pill-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0f1622;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  padding: 10px 18px;
  border-radius: 8px;
  font-family: var(--font-heading-family);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.motocard-pill-tab:hover {
  background: #182234;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.motocard-pill-tab.is-active {
  background: linear-gradient(135deg, #00B1DD 0%, #0084A8 100%) !important;
  color: #ffffff !important;
  border-color: #00E5FF !important;
  box-shadow: 0 4px 18px rgba(0, 177, 221, 0.45) !important;
}

.motocard-shop-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: start;
}

/* Sidebar de Filtros Motocard */
.motocard-filters {
  background: #0a0e16;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 18px;
  position: sticky;
  top: 96px;
}
.motocard-filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 14px;
}
.motocard-filters__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.filter-count-badge {
  background: #00B1DD;
  color: #000;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
}
.motocard-filters__clear {
  background: transparent;
  border: none;
  color: #FF5252;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  text-transform: uppercase;
  padding: 0;
}
.motocard-filters__clear:hover {
  text-decoration: underline;
}

.motocard-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.filter-chip {
  background: rgba(0, 177, 221, 0.15);
  border: 1px solid rgba(0, 177, 221, 0.35);
  color: #00E5FF;
  font-size: 0.74rem;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.filter-chip:hover {
  background: rgba(255, 23, 68, 0.2);
  border-color: #FF1744;
  color: #fff;
}

/* Acordeón de grupos de filtro */
.filter-group {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 12px 0;
}
.filter-group:last-child {
  border-bottom: none;
}
.filter-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #e2e8f0;
  user-select: none;
  padding: 4px 0;
}
.filter-group__header:hover {
  color: #00E5FF;
}
.filter-group__toggle {
  font-size: 1.1rem;
  color: #94a3b8;
}
.filter-group__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
}
.filter-group:not(.is-open) .filter-group__content {
  display: none;
}

.filter-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: #cbd5e1;
  cursor: pointer;
  user-select: none;
}
.filter-checkbox input[type="checkbox"] {
  accent-color: #00B1DD;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.filter-checkbox:hover {
  color: #fff;
}

.price-range-inputs {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}
.price-range-inputs div {
  flex: 1;
}
.price-range-inputs label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 3px;
}
.price-range-inputs input {
  width: 100%;
  padding: 6px 8px;
  background: #111620;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #fff;
  font-size: 0.82rem;
}
.filter-apply-btn {
  width: 100%;
  padding: 6px !important;
  font-size: 0.74rem !important;
  margin-top: 4px;
}

/* Toolbar y Grid de Productos */
.motocard-products-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.motocard-products-count {
  font-size: 0.86rem;
  color: #94a3b8;
}
.motocard-products-count strong {
  color: #fff;
}
.motocard-products-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #94a3b8;
}

.motocard-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: stretch;
}
.motocard-product-grid > li {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* --- 5. TARJETAS DE PRODUCTO ESTILO MOTOCARD (CAPTURAS 4, 5 Y 6) --- */
.motocard-card {
  background: #0d121c;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.motocard-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 177, 221, 0.5);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 177, 221, 0.15);
}

.motocard-card__top {
  position: relative;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04), transparent 70%), #090d14;
  aspect-ratio: 1;
  width: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.motocard-card__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}
.badge-pill {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
}
.badge-pill--novedad {
  background: #ff9100;
  color: #000;
}
.badge-pill--sale {
  background: #FF1744;
  color: #fff;
}
.badge-pill--black {
  background: #000;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.motocard-card__wishlist {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
  z-index: 2;
  transition: all 0.2s ease;
}
.motocard-card__wishlist:hover {
  background: #FF1744;
  border-color: #FF1744;
  transform: scale(1.1);
}
.motocard-card__wishlist.is-active {
  background: #FF1744;
  border-color: #FF1744;
}

.motocard-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.motocard-card:hover .motocard-card__img {
  transform: scale(1.06);
}

.motocard-card__body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.motocard-card__rating {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 18px;
  margin-bottom: 6px;
  flex-shrink: 0;
}
.motocard-card__rating span {
  font-size: 0.72rem;
  color: #94a3b8;
  margin-left: 4px;
}

.motocard-card__vendor {
  font-size: 0.7rem;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-height: 16px;
  line-height: 16px;
  margin-bottom: 4px;
  flex-shrink: 0;
  display: block;
}

.motocard-card__title {
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1.35;
  margin: 0 0 10px;
  text-transform: uppercase;
  font-family: var(--font-heading-family);
  min-height: 3.95em; /* Reserva exacta para 3 líneas de título */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-shrink: 0;
}
.motocard-card__title a {
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}
.motocard-card__title a:hover {
  color: #00E5FF;
}

.motocard-card__specs {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 5px;
  min-height: 52px; /* Reserva exacta para 2 filas completas de tags */
  margin-bottom: 12px;
  flex-shrink: 0;
}
.motocard-spec-tag {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  color: #cbd5e1;
  white-space: nowrap;
}

.motocard-card__price-box {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
}
.motocard-pvpr {
  font-size: 0.74rem;
  color: #64748b;
  min-height: 18px;
  line-height: 18px;
  display: block;
}
.motocard-current-price {
  font-size: 1.28rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--font-heading-family);
  min-height: 28px;
  line-height: 28px;
  display: block;
  margin: 2px 0;
}
.motocard-stock-hint {
  font-size: 0.72rem;
  color: #00E676;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 18px;
  margin-top: 2px;
  margin-bottom: 10px;
}

.motocard-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
}
.motocard-btn-quickview {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 8px 10px;
  height: 38px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.motocard-btn-quickview:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #fff;
}
.motocard-btn-add {
  background: linear-gradient(135deg, #00B1DD 0%, #0084A8 100%);
  border: 1px solid #00B1DD;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 8px 12px;
  height: 38px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.22s ease;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0, 177, 221, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.motocard-btn-add:hover {
  background: linear-gradient(135deg, #00c6f7 0%, #0096be 100%);
  border-color: #00E5FF;
  box-shadow: 0 5px 16px rgba(0, 177, 221, 0.48);
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 989px) {
  .motocard-shop-layout {
    grid-template-columns: 1fr;
  }
  .motocard-filters {
    position: static;
  }
  .motocard-header {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
  }
  .motocard-action-btn span:not(.motocard-badge):not(#ThemeToggleIcon):not(.js-bespoke-icon) {
    display: none;
  }
}
@media (max-width: 640px) {
  .motocard-header__search {
    grid-column: 1 / -1;
    order: 3;
  }
  .motocard-header {
    grid-template-columns: auto 1fr;
    gap: 10px;
  }
  .motocard-header__actions {
    justify-content: flex-end;
  }
  .motocard-product-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .motocard-card__actions {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   BARRA DE ANUNCIOS DE ALTO CONTRASTE Y BADGE PULSANTE
   ========================================================================== */
.announcement {
  background: #080c14 !important;
  color: #f1f5f9 !important;
  border-bottom: 1px solid rgba(0, 177, 221, 0.25) !important;
  font-size: 0.82rem;
  padding: 8px 0;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.announcement__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.announcement__text {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #e2e8f0 !important;
  font-weight: 500;
}
.announcement__status {
  display: flex;
  align-items: center;
  gap: 14px;
}
.announcement__status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(0, 230, 118, 0.14) !important;
  border: 1px solid rgba(0, 230, 118, 0.45) !important;
  color: #00E676 !important;
  font-weight: 700 !important;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}
.status-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00E676;
  box-shadow: 0 0 10px #00E676;
  animation: jnBlink 1.8s infinite ease-in-out;
}

/* Botón de Alternancia de Tema en el Header */
.motocard-action-btn--theme {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 6px 12px;
  color: #fff;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: all 0.22s ease;
}
.motocard-action-btn--theme:hover {
  background: rgba(0, 177, 221, 0.2);
  border-color: var(--color-primary);
  color: #00E5FF;
  transform: translateY(-1px);
}

/* Drawer de Favoritos (Wishlist) */
.wishlist-drawer .drawer__panel {
  width: 100%;
  max-width: 440px;
}
.wishlist-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
  align-items: center;
}
.wishlist-item__img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--color-surface-2);
}
.wishlist-item__info {
  flex: 1;
}
.wishlist-item__title {
  font-size: 0.88rem;
  font-weight: 700;
  margin: 0 0 4px;
  display: block;
}
.wishlist-item__price {
  font-size: 0.82rem;
  color: var(--color-primary);
  font-weight: 700;
}


/* ==========================================================================
   SECCIÓN ADN JN BIKERS (JORGE NEGRETE & YAMAHA YZF-R6R) — BASE STYLES
   ========================================================================== */
.adn-jnbikers-section {
  padding: clamp(56px, 7vw, 92px) 0;
  background: #06090e;
  border-top: 1px solid rgba(0, 177, 221, 0.22);
  border-bottom: 1px solid rgba(0, 177, 221, 0.22);
  position: relative;
  overflow: hidden;
}

.adn-jnbikers__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4.5vw, 60px);
  align-items: center;
}
@media (min-width: 900px) {
  .adn-jnbikers__grid {
    grid-template-columns: 1fr 1.15fr;
  }
}

.adn-jnbikers__visual {
  position: relative;
  width: 100%;
}

.adn-jnbikers__img-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(0, 177, 221, 0.45);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75), 0 0 35px rgba(0, 177, 221, 0.25);
  background: #020408;
  aspect-ratio: 1 / 1;
}

.adn-jnbikers__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}
.adn-jnbikers__img-wrap:hover .adn-jnbikers__img {
  transform: scale(1.035);
}

.adn-jnbikers__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(8, 12, 18, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid #d90429;
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--font-heading-family);
  font-size: 0.74rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.06em;
  z-index: 2;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
.adn-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d90429;
  box-shadow: 0 0 8px #d90429;
  animation: jnBlink 1.5s infinite ease-in-out;
}

.adn-jnbikers__img-wrap:has(video),
.adn-jnbikers__img-wrap.has-video {
  aspect-ratio: 16 / 9;
  background: #000;
}
.adn-jnbikers__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}
.adn-jnbikers__video-controls {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 5;
}
.adn-video-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  background: rgba(8, 12, 18, 0.88);
  color: #ffffff;
  border: 1px solid rgba(0, 177, 221, 0.45);
  border-radius: 999px;
  font-family: var(--font-heading-family, inherit);
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  user-select: none;
}
.adn-video-btn:hover {
  background: rgba(0, 177, 221, 0.32);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 177, 221, 0.45);
}
.adn-video-btn:active {
  transform: translateY(0);
}

.adn-jnbikers__telemetry {
  position: static;
  margin-top: 14px;
  background: #090d14;
  border: 1px solid rgba(0, 177, 221, 0.35);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}
.adn-telemetry__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.adn-telemetry__row strong {
  color: #ffffff;
  font-size: 0.95rem;
}
.adn-telemetry__specs {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.78rem;
  color: rgba(242, 244, 247, 0.88);
}
.adn-telemetry__specs span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.adn-jnbikers__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.adn-jnbikers__title {
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  line-height: 1.15;
  margin: 10px 0 16px;
  color: var(--color-text);
  font-family: var(--font-heading-family);
  font-weight: 700;
}
.adn-jnbikers__rte p {
  color: var(--color-muted);
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  line-height: 1.65;
  margin-bottom: 12px;
}
.adn-jnbikers__rte strong {
  color: var(--color-text);
}

.adn-jnbikers__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 24px 0;
  padding: 16px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.adn-stat {
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
}
.adn-stat__num {
  font-family: var(--font-heading-family);
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 6px;
}
.adn-stat__lbl {
  font-size: 0.74rem;
  color: var(--color-muted);
  line-height: 1.35;
}

.adn-jnbikers__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

/* ==========================================================================
   JN BIKERS · MODO CLARO (LIGHT THEME) — ESTILO AUTOMOTRIZ PREMIUM
   ========================================================================== */
[data-theme="light"],
html[data-theme="light"] {
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-surface-2: #f1f5f9;
  --color-text: #0f172a;
  --color-muted: #475569;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-primary: #0084a8;
  --color-primary-rgb: 0, 132, 168;
  --color-on-primary: #ffffff;
}

[data-theme="light"] body {
  background-color: #f8fafc !important;
  color: #0f172a !important;
}

/* Tipografía y encabezados globales en Modo Claro */
[data-theme="light"] .section-head__title,
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] .h1,
[data-theme="light"] .h2,
[data-theme="light"] .h3,
[data-theme="light"] .h4 {
  color: #0f172a !important;
}

[data-theme="light"] .section-head__sub,
[data-theme="light"] p {
  color: #334155 !important;
}

[data-theme="light"] strong {
  color: #0f172a !important;
}

[data-theme="light"] .kicker {
  color: #0084a8 !important;
}

/* ==========================================================================
   1. HERO SLIDER EN MODO CLARO (MANTIENE CONTRASTE FOTOGRÁFICO Y TEXTO BLANCO)
   ========================================================================== */
[data-theme="light"] .hero--split .hero__shade,
[data-theme="light"] .hero__shade {
  background: linear-gradient(90deg, #080c14 0%, #080c14 40%, rgba(8, 12, 20, 0.86) 52%, rgba(8, 12, 20, 0.15) 75%, rgba(8, 12, 20, 0.35) 100%) !important;
}
@media (max-width: 749px) {
  .hero--split .hero__shade,
  [data-theme="light"] .hero__shade {
    background: linear-gradient(0deg, #080c14 0%, rgba(8, 12, 20, 0.95) 50%, rgba(8, 12, 20, 0.35) 75%, rgba(8, 12, 20, 0.1) 100%) !important;
  }
}

@media (max-width: 749px) {
  [data-theme="light"] .hero--split .hero__shade,
  [data-theme="light"] .hero__shade {
    background: linear-gradient(0deg, rgba(8, 12, 20, 0.96) 0%, rgba(8, 12, 20, 0.82) 50%, rgba(8, 12, 20, 0.25) 100%) !important;
  }
}

[data-theme="light"] .hero__content,
[data-theme="light"] .hero__title,
[data-theme="light"] .hero__rte,
[data-theme="light"] .hero__rte p,
[data-theme="light"] .hero__text,
[data-theme="light"] .hero p {
  color: #ffffff !important;
}

[data-theme="light"] .hero .kicker {
  color: #00e5ff !important;
}

[data-theme="light"] .hero__title em {
  color: #00e5ff !important;
  text-shadow: 0 0 25px rgba(0, 229, 255, 0.6) !important;
}

[data-theme="light"] .hero .btn--outline {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}
[data-theme="light"] .hero .btn--outline:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: #ffffff !important;
}

/* ==========================================================================
   2. HEADER, SUBNAV & DRAWER PRINCIPAL: SIEMPRE OSCURO CARBON AUTOMOTRIZ
      (PRESERVA LA INTEGRACIÓN NATIVA DEL LOGO JN BIKERS Y MENÚ SIN CORTES)
   ========================================================================== */
.header-wrapper,
.motocard-header,
[data-theme="light"] .header-wrapper,
[data-theme="light"] .motocard-header {
  background: #080c14 !important;
  border-bottom: 1px solid rgba(0, 177, 221, 0.22) !important;
  color: #ffffff !important;
}

.motocard-menu-btn,
[data-theme="light"] .motocard-menu-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}
.motocard-menu-btn:hover,
[data-theme="light"] .motocard-menu-btn:hover {
  background: rgba(0, 177, 221, 0.15) !important;
  border-color: #00B1DD !important;
  color: #00E5FF !important;
}

.motocard-search-box,
[data-theme="light"] .motocard-search-box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.motocard-search-box input {
  background: #111620 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px !important;
  color: #ffffff !important;
}
[data-theme="light"] .motocard-search-box input {
  background: #F4F6F9 !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 999px !important;
  color: #101318 !important;
}
.motocard-search-box input::placeholder {
  color: #94a3b8 !important;
}
[data-theme="light"] .motocard-search-box input::placeholder {
  color: #64748b !important;
}

.motocard-action-btn,
[data-theme="light"] .motocard-action-btn {
  color: #d1d5db !important;
}
.motocard-action-btn svg,
[data-theme="light"] .motocard-action-btn svg {
  stroke: #d1d5db !important;
}
.motocard-action-btn:hover,
[data-theme="light"] .motocard-action-btn:hover {
  color: #00E5FF !important;
}
.motocard-action-btn:hover svg,
[data-theme="light"] .motocard-action-btn:hover svg {
  stroke: #00E5FF !important;
}

.motocard-action-btn--theme,
[data-theme="light"] .motocard-action-btn--theme {
  background: rgba(0, 177, 221, 0.08) !important;
  border-color: rgba(0, 177, 221, 0.45) !important;
  color: #00E5FF !important;
}

.motocard-subnav,
[data-theme="light"] .motocard-subnav {
  background: #06090e !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.motocard-subnav__link,
[data-theme="light"] .motocard-subnav__link {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
}
.motocard-subnav__link:hover,
[data-theme="light"] .motocard-subnav__link:hover {
  background: rgba(0, 177, 221, 0.16) !important;
  color: #00E5FF !important;
  border-color: #00B1DD !important;
}
.motocard-subnav__link.is-active,
[data-theme="light"] .motocard-subnav__link.is-active {
  background: #00B1DD !important;
  border-color: #00B1DD !important;
  color: #03141c !important;
  font-weight: 700 !important;
}
.motocard-subnav__link--promo,
[data-theme="light"] .motocard-subnav__link--promo {
  background: rgba(229, 57, 53, 0.12) !important;
  border-color: rgba(229, 57, 53, 0.4) !important;
  color: #ff5252 !important;
}

/* Drawer Principal (#MotocardMenuDrawer): SIEMPRE OSCURO */
.motocard-drawer__panel,
[data-theme="light"] .motocard-drawer__panel {
  background: #080c14 !important;
  border-right: 1px solid rgba(0, 177, 221, 0.25) !important;
  box-shadow: 15px 0 50px rgba(0, 0, 0, 0.7) !important;
}

.motocard-drawer__head,
[data-theme="light"] .motocard-drawer__head {
  background: #05080e !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.motocard-drawer__close,
[data-theme="light"] .motocard-drawer__close {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}
.motocard-drawer__close:hover,
[data-theme="light"] .motocard-drawer__close:hover {
  background: #d90429 !important;
  border-color: #d90429 !important;
  color: #ffffff !important;
}

.motocard-drawer__body,
[data-theme="light"] .motocard-drawer__body {
  background: #080c14 !important;
}

.motocard-menu-item,
[data-theme="light"] .motocard-menu-item {
  color: #f1f5f9 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}
.motocard-menu-item:hover,
[data-theme="light"] .motocard-menu-item:hover {
  background: rgba(0, 177, 221, 0.14) !important;
  color: #00e5ff !important;
  padding-left: 28px !important;
}
.motocard-menu-item__text,
[data-theme="light"] .motocard-menu-item__text {
  color: inherit !important;
}
.motocard-menu-item__arrow,
[data-theme="light"] .motocard-menu-item__arrow {
  color: #64748b !important;
}
.motocard-menu-item:hover .motocard-menu-item__arrow,
[data-theme="light"] .motocard-menu-item:hover .motocard-menu-item__arrow {
  color: #00e5ff !important;
}

.motocard-drawer__footer,
[data-theme="light"] .motocard-drawer__footer {
  background: #05080e !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
}
.motocard-drawer__moto-status,
[data-theme="light"] .motocard-drawer__moto-status {
  color: #94a3b8 !important;
}
.motocard-drawer__moto-status strong,
[data-theme="light"] .motocard-drawer__moto-status strong {
  color: #ffffff !important;
}
#DrawerSelectMotoBtn,
[data-theme="light"] #DrawerSelectMotoBtn {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}
#DrawerSelectMotoBtn:hover,
[data-theme="light"] #DrawerSelectMotoBtn:hover {
  background: #00B1DD !important;
  border-color: #00B1DD !important;
  color: #03141c !important;
}
#DrawerThemeToggle,
[data-theme="light"] #DrawerThemeToggle {
  background: rgba(0, 177, 221, 0.1) !important;
  border-color: rgba(0, 177, 221, 0.45) !important;
  color: #00e5ff !important;
}
#DrawerThemeToggle:hover,
[data-theme="light"] #DrawerThemeToggle:hover {
  background: rgba(0, 177, 221, 0.22) !important;
  border-color: #00e5ff !important;
}

/* ==========================================================================
   3. MARQUESINA DE MARCAS
   ========================================================================== */
[data-theme="light"] .brands-marquee-section {
  background: rgba(255, 255, 255, 0.96) !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
[data-theme="light"] .brand-pill-btn {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}
[data-theme="light"] .brand-pill-btn:hover {
  background: #f1f5f9 !important;
  border-color: #0084a8 !important;
  color: #0084a8 !important;
}
[data-theme="light"] .brand-pill-btn.is-active,
[data-theme="light"] .brand-pill-btn--active {
  background: #0084a8 !important;
  border-color: #0084a8 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   4. COMPRA POR CATEGORÍA (.cat-card)
   ========================================================================== */
[data-theme="light"] .cat-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .cat-card:hover {
  border-color: #0084a8 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .cat-card__title {
  color: #0f172a !important;
}
[data-theme="light"] .cat-card:hover .cat-card__title {
  color: #0084a8 !important;
}
[data-theme="light"] .cat-card__count {
  color: #475569 !important;
}
[data-theme="light"] .cat-card__arrow {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* ==========================================================================
   5. CATÁLOGO MOTOCARD (PRODUCTOS Y FILTROS)
   ========================================================================== */

/* ==========================================================================
   FILTROS Y SIDEBAR EN MODO CLARO (100% INTEGRADO AL DISEÑO BLANCO Y SLATE)
   ========================================================================== */
[data-theme="light"] .motocard-pill-tab {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .motocard-pill-tab:hover {
  background: #f1f5f9 !important;
  border-color: #0084a8 !important;
  color: #0084a8 !important;
}
[data-theme="light"] .motocard-pill-tab.is-active {
  background: linear-gradient(135deg, #00B1DD 0%, #0084A8 100%) !important;
  border-color: #0084A8 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(0, 132, 168, 0.35) !important;
}

[data-theme="light"] .motocard-filters,
[data-theme="light"] #MotocardFiltersSidebar,
[data-theme="light"] .motocard-filters-sidebar {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  color: #0f172a !important;
}

[data-theme="light"] .motocard-filters__head {
  border-bottom: 1px solid #e2e8f0 !important;
}

[data-theme="light"] .motocard-filters__title strong {
  color: #0f172a !important;
  font-weight: 800 !important;
}

[data-theme="light"] .filter-count-badge {
  background: #0084a8 !important;
  color: #ffffff !important;
}

[data-theme="light"] .motocard-filters__clear {
  color: #dc2626 !important;
}
[data-theme="light"] .motocard-filters__clear:hover {
  color: #991b1b !important;
}

[data-theme="light"] .filter-group {
  border-bottom: 1px solid #f1f5f9 !important;
}

[data-theme="light"] .filter-group__header {
  color: #0f172a !important;
}
[data-theme="light"] .filter-group__header:hover {
  color: #0084a8 !important;
}
[data-theme="light"] .filter-group__header span {
  color: #0f172a !important;
  font-weight: 700 !important;
}
[data-theme="light"] .filter-group__toggle {
  color: #64748b !important;
}

[data-theme="light"] .filter-checkbox {
  color: #334155 !important;
}
[data-theme="light"] .filter-checkbox:hover {
  color: #0084a8 !important;
}
[data-theme="light"] .filter-checkbox input[type="checkbox"] {
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
}
[data-theme="light"] .filter-checkbox span {
  color: #334155 !important;
}
[data-theme="light"] .filter-checkbox:hover span {
  color: #0084a8 !important;
}

[data-theme="light"] .price-range-inputs label {
  color: #475569 !important;
}
[data-theme="light"] .price-range-inputs input {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}
[data-theme="light"] .price-range-inputs input:focus {
  border-color: #0084a8 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(0, 132, 168, 0.15) !important;
}

[data-theme="light"] .filter-apply-btn {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}
[data-theme="light"] .filter-apply-btn:hover {
  background: #0084a8 !important;
  border-color: #0084a8 !important;
  color: #ffffff !important;
}

[data-theme="light"] .filter-chip {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  color: #1e3a8a !important;
}
[data-theme="light"] .filter-chip button {
  color: #1e3a8a !important;
}

/* Tarjetas de Producto Motocard */
[data-theme="light"] .motocard-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .motocard-card:hover {
  border-color: #0084a8 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.09) !important;
}
[data-theme="light"] .motocard-card__top {
  background: #f8fafc !important;
}
[data-theme="light"] .motocard-card__body {
  background: #ffffff !important;
  color: #0f172a !important;
}
[data-theme="light"] .motocard-card__title a {
  color: #0f172a !important;
}
[data-theme="light"] .motocard-card__title a:hover {
  color: #0084a8 !important;
}
[data-theme="light"] .motocard-current-price {
  color: #0f172a !important;
}
[data-theme="light"] .motocard-card__vendor {
  color: #475569 !important;
}
[data-theme="light"] .motocard-spec-tag {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}
[data-theme="light"] .motocard-pvpr {
  color: #64748b !important;
}
[data-theme="light"] .motocard-stock-hint {
  color: #166534 !important;
}
[data-theme="light"] .motocard-btn-quickview {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}
[data-theme="light"] .motocard-btn-quickview:hover {
  background: #f1f5f9 !important;
  color: #0084a8 !important;
  border-color: #0084a8 !important;
}
[data-theme="light"] .motocard-card__wishlist {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: #cbd5e1 !important;
}
[data-theme="light"] .motocard-card__wishlist svg {
  stroke: #475569 !important;
}
[data-theme="light"] .motocard-card__wishlist.is-active svg {
  fill: #d90429 !important;
  stroke: #d90429 !important;
}
[data-theme="light"] .motocard-card__rating span {
  color: #475569 !important;
}

/* ==========================================================================
   6. BANNER PROMOCIONAL (.seasonal-promo-banner)
   ========================================================================== */
[data-theme="light"] .seasonal-promo-banner {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 60%, #e2e8f0 100%) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .seasonal-promo__title {
  color: #0f172a !important;
}
[data-theme="light"] .seasonal-promo__sub {
  color: #334155 !important;
}
[data-theme="light"] .seasonal-promo__tag {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  color: #0084a8 !important;
}

/* ==========================================================================
   7. COMBOS & KITS (.combo-card)
   ========================================================================== */
[data-theme="light"] .combo-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .combo-card:hover {
  border-color: #0084a8 !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.09) !important;
}
[data-theme="light"] .combo-card__title,
[data-theme="light"] .combo-card h3 {
  color: #0f172a !important;
}
[data-theme="light"] .combo-card__items {
  color: #334155 !important;
}
[data-theme="light"] .combo-card__items li {
  border-bottom-color: #f1f5f9 !important;
  color: #334155 !important;
}
[data-theme="light"] .combo-card__price-now {
  color: #0f172a !important;
}
[data-theme="light"] .combo-card__price-was {
  color: #64748b !important;
}
[data-theme="light"] .combo-card__tag {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  color: #0084a8 !important;
}

/* ==========================================================================
   8. SECCIÓN ADN JN BIKERS (JORGE NEGRETE & YAMAHA YZF-R6R)
   ========================================================================== */
[data-theme="light"] .adn-jnbikers-section {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}
[data-theme="light"] .adn-jnbikers__title {
  color: #0f172a !important;
}
[data-theme="light"] .adn-jnbikers__rte p {
  color: #334155 !important;
}
[data-theme="light"] .adn-jnbikers__rte strong {
  color: #0f172a !important;
}
[data-theme="light"] .adn-stat {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
[data-theme="light"] .adn-stat__num {
  color: #0084a8 !important;
}
[data-theme="light"] .adn-stat__lbl {
  color: #475569 !important;
}
[data-theme="light"] .adn-jnbikers__telemetry {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .adn-telemetry__row strong {
  color: #0f172a !important;
}
[data-theme="light"] .adn-telemetry__specs {
  color: #334155 !important;
}
[data-theme="light"] .adn-jnbikers__img-wrap {
  border-color: #cbd5e1 !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1) !important;
}

/* ==========================================================================
   9. SIMULADOR DE HAZ DE LUZ (#simulador-luz)
   ========================================================================== */
[data-theme="light"] .beam-sim {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05) !important;
  color: #0f172a !important;
}
[data-theme="light"] .beam-sim h3 {
  color: #0f172a !important;
}
[data-theme="light"] .beam-btn {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}
[data-theme="light"] .beam-btn:hover {
  border-color: #0084a8 !important;
  background: #f1f5f9 !important;
}
[data-theme="light"] .beam-btn strong {
  color: #0f172a !important;
}
[data-theme="light"] .beam-btn span {
  color: #475569 !important;
}
[data-theme="light"] .beam-btn.is-active {
  background: #eff6ff !important;
  border-color: #0084a8 !important;
  box-shadow: 0 0 15px rgba(0, 132, 168, 0.15) !important;
}
[data-theme="light"] .beam-btn.is-active strong {
  color: #0084a8 !important;
}
[data-theme="light"] .atm-pill-btn {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}
[data-theme="light"] .atm-pill-btn:hover {
  background: #f1f5f9 !important;
  border-color: #0084a8 !important;
  color: #0084a8 !important;
}
[data-theme="light"] .atm-pill-btn.is-active {
  background: #0084a8 !important;
  border-color: #0084a8 !important;
  color: #ffffff !important;
}
[data-theme="light"] .spec-chip {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

/* ==========================================================================
   10. TRABAJOS EN VIDEO & FAQ & TRUST
   ========================================================================== */
[data-theme="light"] .works-section {
  background: #f8fafc !important;
}
[data-theme="light"] .works-section .section-head__title {
  color: #0f172a !important;
}
[data-theme="light"] .works-section .section-head__sub {
  color: #475569 !important;
}

[data-theme="light"] .faq-item {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}
[data-theme="light"] .faq-item.is-open {
  border-color: #0084a8 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .faq-trigger {
  color: #0f172a !important;
}
[data-theme="light"] .faq-content {
  color: #334155 !important;
}

[data-theme="light"] .trust__item {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}
[data-theme="light"] .trust__item h3 {
  color: #0f172a !important;
}
[data-theme="light"] .trust__item p {
  color: #475569 !important;
}

[data-theme="light"] .section--surface {
  background: #f8fafc !important;
}

/* ==========================================================================
   11. DRAWERS & MODALS EN MODO CLARO (WISHLIST, CART & DIALOGS)
   ========================================================================== */
[data-theme="light"] .wishlist-drawer .drawer__panel,
[data-theme="light"] .cart-drawer .drawer__panel,
[data-theme="light"] .motocard-moto-dialog,
[data-theme="light"] .drawer__panel {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15) !important;
}
[data-theme="light"] .wishlist-drawer .drawer__head,
[data-theme="light"] .cart-drawer .drawer__head {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
[data-theme="light"] .wishlist-drawer .drawer__foot,
[data-theme="light"] .cart-drawer .drawer__foot {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
}
[data-theme="light"] .drawer__title,
[data-theme="light"] .drawer__head h2,
[data-theme="light"] .drawer__head h3 {
  color: #0f172a !important;
}
[data-theme="light"] .motocard-form-group select,
[data-theme="light"] .motocard-form-group input,
[data-theme="light"] .select,
[data-theme="light"] .input {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
[data-theme="light"] .wishlist-item,
[data-theme="light"] .cart-item {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}
[data-theme="light"] .wishlist-item strong,
[data-theme="light"] .cart-item strong {
  color: #0f172a !important;
}
[data-theme="light"] .wishlist-item span,
[data-theme="light"] .cart-item span {
  color: #475569 !important;
}
[data-theme="light"] .cart-foot {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
}
[data-theme="light"] .cart-foot strong {
  color: #0f172a !important;
}

/* ==========================================================================
   12. PIE DE PÁGINA (FOOTER) EN MODO CLARO
   ========================================================================== */
[data-theme="light"] .footer {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  border-top: 1px solid #1e293b !important;
}
[data-theme="light"] .footer a {
  color: #94a3b8 !important;
}
[data-theme="light"] .footer a:hover {
  color: #38bdf8 !important;
}
[data-theme="light"] .footer__brand p,
[data-theme="light"] .footer__contact li {
  color: #94a3b8 !important;
}
[data-theme="light"] .footer h3 {
  color: #38bdf8 !important;
}
[data-theme="light"] .footer__bottom {
  border-top: 1px solid #1e293b !important;
  color: #64748b !important;
}

[data-theme="light"] .motocard-btn-add {
  background: linear-gradient(135deg, #0084A8 0%, #006C8A 100%) !important;
  border: 1px solid #0084A8 !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(0, 132, 168, 0.24) !important;
}
[data-theme="light"] .motocard-btn-add:hover {
  background: linear-gradient(135deg, #009BC5 0%, #0081A4 100%) !important;
  border-color: #009BC5 !important;
  box-shadow: 0 5px 16px rgba(0, 132, 168, 0.38) !important;
  transform: translateY(-1px);
}

/* ==========================================================================
   HERO CAROUSEL: TRACK HORIZONTAL CONTINUO (CERO DOBLE EXPOSICIÓN / MOTOCARD UX)
   ========================================================================== */
/* ==========================================================================
   HERO CARRUSEL RESPONSIVE & ENCUADRE COMPLETO (SIN CORTAR CABEZAS NI MOTOS)
   ========================================================================== */
.hero,
#HeroCarousel {
  position: relative !important;
  overflow: hidden !important;
  background: #06090e !important;
}
.hero__slides,
#HeroSlides {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  transform: translateX(0);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: transform;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}
.hero__slide {
  grid-area: auto !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  min-height: clamp(660px, 48vw, 760px) !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background: #06090e !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

/* En pantallas de escritorio y laptops (>= 990px): media en el 56% derecho para fotos 1:1 y 4:3 */
@media (min-width: 990px) {
  .hero__slide {
    min-height: 700px !important;
  }
  .hero__media {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 56% !important;
    max-width: 980px !important;
    height: 100% !important;
    z-index: 1 !important;
  }
  .hero__media img,
  .hero__media video,
  .hero__main-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
  .hero__shade {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    background: linear-gradient(90deg, #06090e 0%, #06090e 40%, rgba(6, 9, 14, 0.86) 52%, rgba(6, 9, 14, 0.15) 75%, rgba(6, 9, 14, 0.35) 100%) !important;
    pointer-events: none !important;
  }
}

/* En tablets (750px - 989px): ancho completo con encuadre superior */
@media (min-width: 750px) and (max-width: 989px) {
  .hero__slide {
    min-height: 660px !important;
    align-items: center !important;
  }
  .hero__media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
  }
  .hero__media img,
  .hero__media video,
  .hero__main-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
  .hero__shade {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    background: linear-gradient(90deg, rgba(6, 9, 14, 0.96) 0%, rgba(6, 9, 14, 0.85) 55%, rgba(6, 9, 14, 0.25) 100%) !important;
    pointer-events: none !important;
  }
}

/* En móviles (<= 749px): encuadre vertical completo para ver a Jorge Negrete y la moto */
@media (max-width: 749px) {
  .hero__slide {
    min-height: 640px !important;
    align-items: flex-end !important;
    padding-bottom: 24px !important;
  }
  .hero__media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    overflow: hidden !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }
  .hero__media img,
  .hero__media video,
  .hero__main-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
  }
  .hero__shade {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -2px !important;
    z-index: 2 !important;
    background: linear-gradient(
      0deg,
      #06090e 0%,
      #06090e 14%,
      rgba(6, 9, 14, 0.96) 34%,
      rgba(6, 9, 14, 0.60) 54%,
      rgba(6, 9, 14, 0.15) 74%,
      transparent 90%
    ) !important;
    pointer-events: none !important;
  }
  .hero__content {
    padding-bottom: 18px !important;
  }
  .hero__title {
    font-size: 1.85rem !important;
    line-height: 1.15 !important;
    margin-bottom: 6px !important;
  }
  .hero__text.rte p {
    font-size: 0.86rem !important;
    line-height: 1.35 !important;
    margin-bottom: 12px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .hero__actions {
    gap: 8px !important;
  }
  .hero__actions .btn {
    padding: 10px 18px !important;
    font-size: 0.88rem !important;
    min-height: 42px !important;
  }
}

.hero .page-width {
  position: relative !important;
  z-index: 3 !important;
}
.hero__content {
  position: relative !important;
  z-index: 3 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   BARRA DE ANUNCIOS & BANNER MOTO ACTIVA EN MODO CLARO (FONDO BLANCO / HIGH CONTRAST)
   ========================================================================== */
[data-theme="light"] .announcement {
  background: #ffffff !important;
  color: #0f172a !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] .announcement__text {
  color: #0f172a !important;
  font-weight: 600 !important;
}

[data-theme="light"] .announcement__status-badge {
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #047857 !important;
  font-weight: 700 !important;
}

[data-theme="light"] .status-pulse-dot {
  background: #10b981 !important;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7) !important;
}

/* Banner de Moto Activa en Modo Claro: Fondo Blanco Puro con Borde Cian */
[data-theme="light"] .motocard-active-moto-banner {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 5px solid #0084a8 !important;
  box-shadow: 0 4px 18px rgba(0, 132, 168, 0.08) !important;
  color: #0f172a !important;
}

[data-theme="light"] .active-moto-info strong {
  color: #0369a1 !important;
}

[data-theme="light"] .active-moto-info strong #ActiveMotoName {
  color: #0f172a !important;
  text-decoration: underline;
  text-decoration-color: #0084a8;
}

[data-theme="light"] .active-moto-info p {
  color: #475569 !important;
}

[data-theme="light"] #BtnChangeActiveMoto {
  background: #0084a8 !important;
  border: 1px solid #0084a8 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
  padding: 8px 18px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0, 132, 168, 0.25) !important;
}

[data-theme="light"] #BtnChangeActiveMoto:hover {
  background: #0284c7 !important;
  border-color: #0284c7 !important;
  box-shadow: 0 4px 14px rgba(0, 132, 168, 0.38) !important;
}

/* ==========================================================================
   ICONOGRAFÍA VECTORIAL BESPOKE DE ALTA PRECISIÓN & ESTILO IA / CYBERPUNK
   ========================================================================== */
.icon-bespoke {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s ease, filter 0.22s ease;
}

.motocard-menu-item__icon {
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.motocard-menu-item__icon .icon-bespoke {
  width: 22px !important;
  height: 22px !important;
  filter: drop-shadow(0 0 5px rgba(0, 177, 221, 0.45));
}

.motocard-menu-item:hover .motocard-menu-item__icon .icon-bespoke {
  transform: scale(1.18);
  filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.85));
}

.motocard-subnav__link .icon-bespoke,
.motocard-pill-tab .icon-bespoke {
  width: 16px !important;
  height: 16px !important;
  margin-right: 6px;
  display: inline-flex;
  vertical-align: middle;
}

.motocard-subnav__link.is-active .icon-bespoke,
.motocard-pill-tab.is-active .icon-bespoke {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.85));
}

.active-moto-icon .icon-bespoke {
  width: 32px !important;
  height: 32px !important;
  filter: drop-shadow(0 0 10px rgba(0, 177, 221, 0.55));
}

.announcement__icon .icon-bespoke {
  width: 18px !important;
  height: 18px !important;
  margin-right: 6px;
  filter: drop-shadow(0 0 4px rgba(0, 177, 221, 0.4));
}

.adn-telemetry__specs .icon-bespoke {
  width: 16px !important;
  height: 16px !important;
  margin-right: 6px;
  vertical-align: middle;
}

#ThemeToggleIcon .icon-bespoke {
  width: 20px !important;
  height: 20px !important;
  filter: drop-shadow(0 0 6px rgba(255, 214, 0, 0.5));
}

#DrawerThemeToggle .icon-bespoke {
  width: 16px !important;
  height: 16px !important;
}

.motocard-drawer__close .icon-bespoke {
  width: 14px !important;
  height: 14px !important;
}


/* ==========================================================================
   🐱 LOGICAT RESPONSIVE MASTER SUITE — JN BIKERS ECOSISTEMA AUTÓNOMO
   Dirección: MOE (Diseño UX/UI & Frontend) + CARL (QA & Validación Multidispositivo)
   Objetivo: Garantizar experiencia 100% fluida, ultra-rápida y ergonómica
   desde móviles compactos (320px - 375px), iPhone/Android modernos (390px - 430px),
   tablets (768px - 989px) hasta monitores 4K.
   ========================================================================== */

/* --- 0. CONTENCIÓN GLOBAL Y PREVENCIÓN DE OVERFLOW LATERAL --- */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  position: relative !important;
  -webkit-overflow-scrolling: touch;
}

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

img, video, canvas, svg {
  max-width: 100%;
}

/* Blindaje Iconos de Botones de Acción (Evitar botón de tema vacío en móvil) */
#ThemeToggleIcon,
#ThemeToggleIcon .icon-bespoke,
.js-bespoke-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* --- 1. AJUSTES PARA TABLETS & PANTALLAS MEDIANAS (max-width: 989px) --- */
@media (max-width: 989px) {
  :root {
    --page-width: 100%;
    --gutter: 14px;
  }

  /* Header Tablet */
  .motocard-header {
    grid-template-columns: auto 1fr auto !important;
    gap: 12px !important;
    padding: 10px var(--gutter) !important;
  }

  .motocard-action-btn span:not(.motocard-badge):not(#ThemeToggleIcon):not(.js-bespoke-icon) {
    display: none !important;
  }

  .motocard-action-btn {
    min-width: 38px;
    height: 38px;
    padding: 6px;
    justify-content: center;
  }

  /* Catálogo & Filtros Tablet */
  .motocard-shop-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .motocard-filters {
    position: static !important;
    background: #0d121c !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    margin-bottom: 20px !important;
  }

  /* Simulador de Luz Tablet */
  .beam-sim {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* ADN JN Bikers Tablet */
  .adn-jnbikers__grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Galería Trabajos Tablet */
  .works__track {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 240px !important;
    gap: 14px !important;
  }
  .works__item:nth-child(1) {
    grid-column: span 2 !important;
    grid-row: auto !important;
  }
  .works__item:nth-child(4) {
    grid-column: span 2 !important;
  }

  /* Ubicación Sede Laureles Tablet */
  .location {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* --- 2. AJUSTES PARA PANTALLAS MÓVILES GRANDES Y TABLETS VERTICALES (max-width: 749px) --- */
@media (max-width: 749px) {
  /* Atmósfera Ribbon Móvil */
  .atmosphere-ribbon {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    font-size: 0.72rem !important;
  }
  #AtmosphereLabel {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 240px !important;
  }
  .countdown-pills {
    justify-content: center !important;
    font-size: 0.7rem !important;
    flex-shrink: 0 !important;
  }

  /* Barra de Anuncios Móvil */
  .announcement {
    padding: 4px 0 !important;
  }
  .announcement__inner {
    justify-content: center !important;
    padding: 0 10px !important;
  }
  .announcement__text {
    font-size: 0.7rem !important;
    text-align: center !important;
    margin: 0 !important;
  }
  .announcement__status {
    display: none !important;
  }

  /* Hero Móvil */
  .hero__slide {
    min-height: 520px !important;
    align-items: flex-end !important;
    padding-bottom: 20px !important;
  }
  .hero__title {
    font-size: clamp(1.5rem, 5vw, 2.1rem) !important;
    line-height: 1.18 !important;
  }
  .hero__content {
    max-width: 100% !important;
  }
  .hero__telemetry-hud {
    padding: 8px 10px !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }

  /* Sección de Combos en 1 Columna */
  .combos-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* Galería Trabajos Móvil */
  .works__track {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 220px !important;
    gap: 12px !important;
  }
  .works__item:nth-child(n) {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* Banner Promocional */
  .seasonal-promo-banner {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    text-align: center !important;
  }
  .seasonal-promo__cta {
    align-items: center !important;
    width: 100% !important;
  }
  .seasonal-promo__cta .btn {
    width: 100% !important;
  }

  /* Footer en 1 Columna */
  .footer__grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .footer__bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
  }
}

/* --- 3. AJUSTES PARA SMARTPHONES ESTÁNDAR (max-width: 640px) --- */
@media (max-width: 640px) {
  :root {
    --gutter: 12px;
  }

  /* Ocultar elementos flotantes que saturan o bloquean la lectura móvil */
  #JnScrollProgress {
    display: none !important;
  }
  #JnBackTop {
    display: none !important;
  }

  /* Header Ultra Compacto de 2 Filas — Sin desbordamiento horizontal */
  .header-wrapper {
    background: #080c14 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.75) !important;
  }

  .motocard-header {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto !important;
    row-gap: 8px !important;
    column-gap: 8px !important;
    align-items: center !important;
    min-height: auto !important;
    padding: 8px var(--gutter) !important;
  }

  /* Fila 1 - Izquierda: Menú + Logo */
  .motocard-header__left {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .motocard-menu-btn {
    padding: 6px 10px !important;
    font-size: 0.76rem !important;
    gap: 5px !important;
    border-radius: 7px !important;
    height: 36px !important;
    background: rgba(255, 255, 255, 0.05) !important;
  }

  .motocard-logo img {
    max-width: 106px !important;
    height: auto !important;
  }

  /* Fila 1 - Derecha: Acciones Rápidas (Iconos táctiles ergonómicos) */
  .motocard-header__actions {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }

  /* Ocultar texto Tiendas en móvil para evitar saturación (está en el menú lateral) */
  .motocard-header__actions a[href="#ubicacion"] {
    display: none !important;
  }

  .motocard-action-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 6px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .motocard-action-btn svg,
  .motocard-action-btn .icon-bespoke {
    width: 18px !important;
    height: 18px !important;
  }

  .motocard-action-btn--cart {
    background: rgba(0, 177, 221, 0.16) !important;
    border-color: rgba(0, 177, 221, 0.35) !important;
  }

  /* Fila 2: Buscador a Ancho Completo */
  .motocard-header__search {
    grid-column: 1 / -1 !important;
    grid-row: 2 / 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .motocard-search-box {
    height: 38px !important;
    border-radius: 999px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .motocard-search-box input {
    height: 38px !important;
    font-size: 0.82rem !important;
    padding: 0 12px 0 36px !important;
    border-radius: 999px !important;
    background: #111620 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
  }
  .motocard-search-box__icon {
    left: 10px !important;
    width: 16px !important;
    height: 16px !important;
  }

  /* Barra de Navegación de Categorías — Centrada, Fluida y Optimizada para Móvil */
  .nav-text-full {
    display: none !important;
  }
  .nav-text-short {
    display: inline !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
  }
  .motocard-subnav {
    position: relative !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 5px 0 !important;
    mask-image: linear-gradient(to right, transparent 0px, black 14px, black calc(100% - 20px), transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0px, black 14px, black calc(100% - 20px), transparent 100%) !important;
  }
  .motocard-subnav::-webkit-scrollbar {
    display: none !important;
  }
  .motocard-subnav__inner {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 14px !important;
    width: max-content !important;
    margin: 0 !important;
  }
  .motocard-subnav__link {
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 0.72rem !important;
    border-radius: 999px !important;
    flex-shrink: 0 !important;
    gap: 5px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  .motocard-subnav__link .icon-bespoke {
    width: 14px !important;
    height: 14px !important;
    margin-right: 2px !important;
  }

  /* Categorías Destacadas (Cat Grid) en 1 columna ergonómica */
  .cat-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .cat-card {
    flex-direction: row !important;
    align-items: center !important;
    min-height: 82px !important;
    border-radius: 10px !important;
  }
  .cat-card__media {
    width: 90px !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    flex-shrink: 0 !important;
  }
  .cat-card__body {
    padding: 10px 14px !important;
    flex: 1 !important;
  }
  .cat-card__title {
    font-size: 0.85rem !important;
    margin-bottom: 2px !important;
  }
  .cat-card__count {
    font-size: 0.7rem !important;
    display: block !important;
  }

  /* Toolbar del Catálogo */
  .motocard-products-toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: space-between !important;
    padding-bottom: 10px !important;
    margin-bottom: 14px !important;
  }
  .motocard-products-count {
    font-size: 0.78rem !important;
  }
  .motocard-products-sort {
    font-size: 0.76rem !important;
  }
  .motocard-products-sort select {
    padding: 5px 8px !important;
    font-size: 0.76rem !important;
  }

  /* Banner Moto Activa */
  .motocard-active-moto-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }
  .motocard-active-moto-banner .btn {
    width: 100% !important;
    text-align: center !important;
  }

  /* ========================================================================
     GRILLA DE PRODUCTOS EN 2 COLUMNAS CON TARJETAS DE ALTURA 100% IDÉNTICA
     ======================================================================== */
  .motocard-product-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .motocard-product-grid > li {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
  }

  .motocard-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    border-radius: 10px !important;
  }

  .motocard-card__top {
    aspect-ratio: 1 !important;
    width: 100% !important;
    flex-shrink: 0 !important;
  }

  .motocard-card__body {
    padding: 10px 10px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
  }

  .motocard-card__rating {
    height: 15px !important;
    margin-bottom: 3px !important;
    flex-shrink: 0 !important;
  }
  .motocard-card__rating span {
    font-size: 0.66rem !important;
  }

  .motocard-card__vendor {
    font-size: 0.64rem !important;
    min-height: 14px !important;
    line-height: 14px !important;
    margin-bottom: 3px !important;
    flex-shrink: 0 !important;
  }

  /* Título simétrico con altura de 3 líneas exactas fija */
  .motocard-card__title {
    font-size: 0.77rem !important;
    min-height: 3.4em !important;
    max-height: 3.4em !important;
    line-height: 1.25 !important;
    margin: 0 0 8px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
  }

  /* Tags de especificaciones con altura simétrica fija */
  .motocard-card__specs {
    min-height: 42px !important;
    max-height: 42px !important;
    gap: 3px !important;
    margin-bottom: 8px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
  }
  .motocard-spec-tag {
    font-size: 0.62rem !important;
    padding: 1px 5px !important;
    border-radius: 3px !important;
    height: 18px !important;
    line-height: 16px !important;
  }

  /* Caja de precio anclada al fondo de la tarjeta */
  .motocard-card__price-box {
    margin-top: auto !important;
    padding-top: 8px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .motocard-pvpr {
    font-size: 0.66rem !important;
    min-height: 15px !important;
    line-height: 15px !important;
  }
  .motocard-current-price {
    font-size: 1.05rem !important;
    min-height: 24px !important;
    line-height: 24px !important;
    margin-bottom: 3px !important;
    white-space: nowrap !important;
  }
  .motocard-card__stock-tag {
    font-size: 0.64rem !important;
    min-height: 28px !important;
    line-height: 14px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Botones de acción en 1 columna vertical para botones táctiles */
  .motocard-card__actions {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    margin-top: 8px !important;
  }
  .motocard-btn-quickview,
  .motocard-btn-add {
    height: 32px !important;
    font-size: 0.72rem !important;
    padding: 0 6px !important;
    border-radius: 6px !important;
  }

  /* Badges y favoritos en fotos */
  .motocard-card__badges {
    top: 6px !important;
    left: 6px !important;
    gap: 3px !important;
  }
  .badge-pill {
    font-size: 0.62rem !important;
    padding: 2px 5px !important;
  }
  .motocard-card__wishlist {
    top: 6px !important;
    right: 6px !important;
    width: 28px !important;
    height: 28px !important;
  }
  .motocard-card__wishlist svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Badges y precios en Combos / Kits */
  .combo-card__save {
    top: 10px !important;
    right: 10px !important;
    font-size: 0.68rem !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    z-index: 2 !important;
  }
  .combo-card__tag {
    top: 38px !important;
    left: 10px !important;
    right: auto !important;
    font-size: 0.64rem !important;
    padding: 3px 8px !important;
    border-radius: 5px !important;
    max-width: calc(100% - 20px) !important;
    z-index: 2 !important;
  }
  .combo-card__body > div:last-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: auto !important;
  }
  .combo-card__body > div:last-child > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
  .combo-card__body > div:last-child .btn {
    width: 100% !important;
    height: 42px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Simulador de Haz de Luz HUD */
  .beam-sim {
    padding: 14px !important;
  }
  .beam-sim__hud {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    padding: 6px 10px !important;
    font-size: 0.72rem !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
  }
  .beam-controls {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin: 14px 0 !important;
  }
  .beam-btn {
    padding: 8px 10px !important;
    font-size: 0.74rem !important;
  }
  .beam-btn strong {
    font-size: 0.78rem !important;
  }

  /* ADN JN Bikers Stats: 3 columnas simétricas en 1 sola fila */
  .adn-jnbikers__stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    padding: 10px 0 !important;
  }
  .adn-stat {
    padding: 8px 6px !important;
    text-align: center !important;
  }
  .adn-stat__num {
    font-size: 1.25rem !important;
    margin-bottom: 2px !important;
  }
  .adn-stat__lbl {
    font-size: 0.65rem !important;
    line-height: 1.25 !important;
  }

  /* Botón Flotante de WhatsApp único en la esquina inferior derecha */
  .whatsapp-float {
    bottom: 18px !important;
    right: 16px !important;
    left: auto !important;
    width: 48px !important;
    height: 48px !important;
    z-index: 90 !important;
  }
  .whatsapp-float svg {
    width: 25px !important;
    height: 25px !important;
  }

  .wa-bot-widget {
    bottom: 76px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-height: calc(100vh - 92px) !important;
    border-radius: 14px !important;
  }
  .wa-bot__head {
    padding: 10px 14px !important;
  }
  .wa-bot__messages {
    padding: 12px !important;
    max-height: 280px !important;
  }

  /* Drawers Laterales (Menú, Carrito, Favoritos) */
  .motocard-drawer__panel,
  .cart-drawer .drawer__panel,
  .wishlist-drawer .drawer__panel {
    max-width: min(350px, 86vw) !important;
  }

  /* Diálogos Modales (Moto Selector, Vista Rápida) */
  .motocard-moto-dialog,
  #UniversalModal .drawer__panel {
    max-width: calc(100vw - 20px) !important;
    margin: 10px auto !important;
    padding: 20px 16px !important;
  }
}

/* --- 4. AJUSTES PARA PANTALLAS ULTRA COMPACTAS (max-width: 380px) --- */
@media (max-width: 380px) {
  :root {
    --gutter: 8px;
  }

  .motocard-header {
    column-gap: 6px !important;
    padding: 6px var(--gutter) !important;
  }

  /* Ocultar texto "MENÚ" para dar máxima prioridad visual al logo */
  .motocard-menu-btn__text {
    display: none !important;
  }
  .motocard-menu-btn {
    padding: 6px 8px !important;
  }

  .motocard-logo img {
    max-width: 94px !important;
  }

  .motocard-header__actions {
    gap: 4px !important;
  }
  .motocard-action-btn {
    width: 33px !important;
    height: 33px !important;
    min-width: 33px !important;
    padding: 5px !important;
  }
  .motocard-action-btn svg,
  .motocard-action-btn .icon-bespoke {
    width: 16px !important;
    height: 16px !important;
  }

  /* Título y precio en pantallas muy pequeñas */
  .motocard-card__title {
    font-size: 0.74rem !important;
    min-height: 3.3em !important;
    max-height: 3.3em !important;
  }
  .motocard-current-price {
    font-size: 0.98rem !important;
  }
  .motocard-spec-tag {
    font-size: 0.58rem !important;
    padding: 1px 4px !important;
  }
}

/* --- 5. MICRO-PANTALLAS EXTREMAS (max-width: 320px) --- */
@media (max-width: 320px) {
  .motocard-product-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==============================================================================
   6. SUITE SOLICITADA POR JORGE NEGRETE (JN BIKERS OFICIAL)
   - Botón Flotante de WhatsApp 100% Siempre Visible (Desktop, Tablet, Mobile)
   - Flechas del Carrusel Hero Centradas Verticalmente a Cada Esquina
   ============================================================================== */

/* 1. BOTÓN FLOTANTE WHATSAPP CIRCULAR OFICIAL SIEMPRE VISIBLE EN TODO EL SITIO */
.whatsapp-float {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 9999 !important;
  width: 58px !important;
  height: 58px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 28px rgba(37, 211, 102, 0.48), 0 3px 12px rgba(0, 0, 0, 0.45) !important;
  cursor: pointer !important;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  outline: none !important;
  text-decoration: none !important;
  animation: jnWaPulseGlow 3.2s infinite !important;
}
.whatsapp-float:hover {
  transform: translateY(-3px) scale(1.08) !important;
  background: linear-gradient(135deg, #29e36e 0%, #17a493 100%) !important;
  box-shadow: 0 12px 35px rgba(37, 211, 102, 0.65), 0 0 24px rgba(37, 211, 102, 0.5) !important;
  color: #ffffff !important;
}
.whatsapp-float svg,
.whatsapp-float .icon-whatsapp {
  width: 32px !important;
  height: 32px !important;
  fill: #ffffff !important;
  flex-shrink: 0 !important;
}
.whatsapp-float span {
  display: none !important;
}

@keyframes jnWaPulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.65), 0 8px 28px rgba(37, 211, 102, 0.48); }
  65% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0), 0 8px 28px rgba(37, 211, 102, 0.48); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 8px 28px rgba(37, 211, 102, 0.48); }
}

@media (max-width: 640px) {
  .whatsapp-float {
    bottom: 18px !important;
    right: 16px !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    justify-content: center !important;
  }
  .whatsapp-float span {
    display: none !important;
  }
  .whatsapp-float svg,
  .whatsapp-float .icon-whatsapp {
    width: 28px !important;
    height: 28px !important;
  }
}

/* 2. FLECHAS DEL CARRUSEL HERO CENTRADAS VERTICALMENTE A CADA ESQUINA */
.hero__arrows {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  justify-content: space-between !important;
  padding: 0 24px !important;
  pointer-events: none !important;
  z-index: 25 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.hero__arrow {
  pointer-events: auto !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: rgba(8, 12, 18, 0.76) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}
.hero__arrow:hover {
  background: rgba(0, 177, 221, 0.22) !important;
  border-color: #00B1DD !important;
  color: #00E5FF !important;
  transform: scale(1.1) !important;
  box-shadow: 0 0 20px rgba(0, 177, 221, 0.5) !important;
}
.hero__arrow svg,
.hero__arrow .icon-bespoke {
  width: 22px !important;
  height: 22px !important;
  stroke: currentColor !important;
}

@media (max-width: 749px) {
  .hero__arrows {
    display: flex !important;
    padding: 0 10px !important;
  }
  .hero__arrow {
    width: 38px !important;
    height: 38px !important;
    background: rgba(6, 9, 14, 0.82) !important;
  }
  .hero__arrow svg,
  .hero__arrow .icon-bespoke {
    width: 18px !important;
    height: 18px !important;
  }
}

/* ==========================================================================
   ÁRBOL DE NAVIDAD 3D (EXCLUSIVO ATMÓSFERA NAVIDAD · CODEPEN PAKA DC)
   - 100% fondo transparente (sin el fondo azul/negro del CodePen original)
   - Solo el arbolito de partículas 3D en espiral con luces navideñas y adornos
   - Se ubica en el espacio izquierdo debajo de los filtros del catálogo
   ========================================================================== */
.motocard-shop-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.motocard-xmas-slot {
  display: none;
  width: 100%;
  max-width: 280px;
  margin: 10px auto 0 auto;
  text-align: center;
  position: relative;
  background: radial-gradient(circle at 50% 45%, #0b1522 0%, #05080e 100%);
  border: 1px solid rgba(0, 229, 255, 0.25);
  border-radius: 18px;
  padding: 8px 0 14px 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}

[data-theme="light"] .motocard-xmas-slot {
  background: radial-gradient(circle at 50% 45%, #0d1b2a 0%, #050a10 100%) !important;
  border: 1px solid rgba(0, 229, 255, 0.35) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22) !important;
}

body[data-atmosphere="navidad"] .motocard-xmas-slot {
  display: block;
}

.motocard-xmas-canvas {
  width: 100%;
  max-width: 280px;
  height: 360px;
  display: block;
  margin: 0 auto;
  background: transparent !important;
  cursor: grab;
}
.motocard-xmas-canvas:active {
  cursor: grabbing;
}

.motocard-xmas-caption {
  margin-top: 4px;
  text-align: center;
}

.motocard-xmas-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 23, 68, 0.12);
  border: 1px solid rgba(255, 23, 68, 0.35);
  color: #ff5252;
  font-family: var(--font-heading-family);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(255, 23, 68, 0.18);
}

[data-theme="light"] .motocard-xmas-badge {
  background: rgba(255, 23, 68, 0.2) !important;
  border-color: rgba(255, 23, 68, 0.5) !important;
  color: #ff5252 !important;
  box-shadow: 0 0 12px rgba(255, 23, 68, 0.25) !important;
}

.motocard-xmas-sub {
  display: block;
  font-family: var(--font-body-family);
  font-size: 0.76rem;
  color: var(--color-muted);
  margin-top: 4px;
  font-weight: 600;
}

[data-theme="light"] .motocard-xmas-sub {
  color: #94a3b8 !important;
}

@media (max-width: 989px) {
  .motocard-xmas-slot {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

/* ==========================================================================
   WIDGET TELEMETRÍA PADDOCK RACING (EXCLUSIVO ATMÓSFERA F2R MEDELLÍN)
   ========================================================================== */
.motocard-f2r-slot {
  display: none;
  width: 100%;
  max-width: 280px;
  margin: 14px auto 0 auto;
  position: relative;
  pointer-events: auto;
}

body[data-atmosphere="f2r"] .motocard-f2r-slot {
  display: block;
  animation: f2rSlotFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes f2rSlotFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.f2r-paddock-gauge {
  background: linear-gradient(165deg, rgba(8, 20, 11, 0.96) 0%, rgba(4, 10, 6, 0.99) 100%);
  border: 1px solid rgba(87, 255, 106, 0.45);
  border-radius: 14px;
  padding: 16px 14px 14px 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 22px rgba(87, 255, 106, 0.16), inset 0 1px 0 rgba(191, 255, 198, 0.25);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
}

.f2r-paddock-gauge::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg, #57FF6A 0px, #57FF6A 10px, #111111 10px, #111111 20px);
  opacity: 0.92;
}

.f2r-gauge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(87, 255, 106, 0.22);
}

.f2r-flag-icon {
  font-size: 1.1rem;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(87, 255, 106, 0.45));
}

.f2r-official-logo-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  border: 1px solid rgba(87, 255, 106, 0.32);
  border-radius: 9px;
  padding: 6px 10px;
  margin-bottom: 10px;
}

.f2r-official-logo-bar img {
  height: 34px;
  width: auto;
  object-fit: contain;
  display: block;
}

.f2r-gauge-title-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: left;
}

.f2r-gauge-title {
  font-family: var(--font-heading-family);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #57FF6A;
  text-transform: uppercase;
  line-height: 1.1;
}

.f2r-gauge-subtitle {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.68);
  text-transform: uppercase;
  margin-top: 2px;
}

.f2r-paddock-badge {
  font-family: var(--font-heading-family);
  font-size: 0.65rem;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(87, 255, 106, 0.16);
  border: 1px solid rgba(87, 255, 106, 0.55);
  color: #57FF6A;
  letter-spacing: 0.06em;
}

.f2r-tachometer-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin: 6px 0 10px 0;
}

.f2r-tach-dial {
  position: relative;
  width: 100%;
  max-width: 220px;
}

.f2r-tach-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 4px 14px rgba(87, 255, 106, 0.28));
}

.f2r-tach-track {
  transition: stroke-dashoffset 0.08s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.f2r-needle-center {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.f2r-rpm-number {
  font-family: var(--font-heading-family);
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  text-shadow: 0 0 14px rgba(87, 255, 106, 0.75);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.f2r-rpm-unit {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #57FF6A;
  text-transform: uppercase;
  margin-top: 3px;
}

.f2r-gear-pill {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-heading-family);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(87, 255, 106, 0.12);
  border: 1px solid rgba(87, 255, 106, 0.35);
  color: #BFFFC6;
}

.f2r-shift-lights {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.f2r-led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  transition: all 0.08s ease;
}

.f2r-led.f2r-green.active {
  background: #57FF6A;
  box-shadow: 0 0 8px #57FF6A, 0 0 14px rgba(87, 255, 106, 0.7);
}

.f2r-led.f2r-yellow.active {
  background: #FFD600;
  box-shadow: 0 0 8px #FFD600, 0 0 14px rgba(255, 214, 0, 0.6);
}

.f2r-led.f2r-red.active {
  background: #FF1744;
  box-shadow: 0 0 8px #FF1744, 0 0 14px rgba(255, 23, 68, 0.7);
}

.f2r-led.f2r-shift-blink {
  width: 11px;
  height: 11px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.f2r-led.f2r-shift-blink.active {
  background: #FFFFFF;
  border-color: #57FF6A;
  box-shadow: 0 0 12px #FFFFFF, 0 0 20px #57FF6A;
}

.f2r-gauge-footer {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(87, 255, 106, 0.22);
  text-align: center;
}

.f2r-telemetry-stats {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 6px;
}

.f2r-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.f2r-stat-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
}

.f2r-stat-val {
  font-family: var(--font-heading-family);
  font-size: 0.72rem;
  font-weight: 800;
  color: #57FF6A;
  margin-top: 1px;
}

.f2r-stat-sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.7rem;
}

.f2r-gauge-cta {
  font-size: 0.68rem;
  font-weight: 800;
  color: #BFFFC6;
  letter-spacing: 0.03em;
  padding: 5px 8px;
  background: rgba(87, 255, 106, 0.12);
  border-radius: 6px;
  border: 1px dashed rgba(87, 255, 106, 0.45);
}

/* ==========================================================================
   VITRINA DE FLYERS Y PUBLICIDAD OFICIAL DE FERIA (DEBAJO DEL WIDGET F2R)
   ========================================================================== */
.f2r-flyers-showcase {
  margin-top: 14px;
  background: linear-gradient(170deg, rgba(8, 18, 10, 0.96) 0%, rgba(4, 9, 5, 0.99) 100%);
  border: 1px solid rgba(87, 255, 106, 0.42);
  border-radius: 14px;
  padding: 14px 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.68), 0 0 18px rgba(87, 255, 106, 0.12);
  position: relative;
  overflow: hidden;
}

.f2r-flyers-showcase::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #57FF6A 0%, #FFD600 35%, #FF1744 70%, #00B1DD 100%);
}

.f2r-flyers-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(87, 255, 106, 0.2);
}

.f2r-flyers-head__title {
  font-family: var(--font-heading-family);
  font-size: 0.74rem;
  font-weight: 900;
  color: #57FF6A;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 5px;
}

.f2r-flyers-upload-trigger {
  background: rgba(87, 255, 106, 0.14);
  border: 1px solid rgba(87, 255, 106, 0.45);
  color: #BFFFC6;
  font-family: var(--font-heading-family);
  font-size: 0.62rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.f2r-flyers-upload-trigger:hover {
  background: #57FF6A;
  color: #041206;
  box-shadow: 0 0 10px rgba(87, 255, 106, 0.5);
}

.f2r-flyers-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.f2r-flyer-card {
  background: #060b07;
  border: 1px solid rgba(87, 255, 106, 0.28);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.f2r-flyer-card:hover {
  transform: translateY(-2px);
  border-color: #57FF6A;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.75), 0 0 14px rgba(87, 255, 106, 0.22);
}

.f2r-flyer-media {
  position: relative;
  aspect-ratio: 4 / 4.6;
  background: #020503;
  overflow: hidden;
  cursor: pointer;
}

.f2r-flyer-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.f2r-flyer-card:hover .f2r-flyer-img {
  transform: scale(1.04);
}

.f2r-flyer-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(4, 14, 6, 0.9);
  border: 1px solid #57FF6A;
  color: #57FF6A;
  font-family: var(--font-heading-family);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

.f2r-flyer-zoom-pill {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.f2r-flyer-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.f2r-flyer-title {
  font-family: var(--font-heading-family);
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  margin: 0;
}

.f2r-flyer-sub {
  font-size: 0.68rem;
  color: rgba(242, 244, 247, 0.68);
  line-height: 1.35;
  margin: 0;
}

.f2r-flyer-wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 2px;
  padding: 7px 10px;
  border-radius: 7px;
  background: linear-gradient(135deg, #57FF6A 0%, #32B842 100%);
  color: #031205;
  font-family: var(--font-heading-family);
  font-size: 0.68rem;
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.f2r-flyer-wa-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

@media (max-width: 989px) {
  .motocard-f2r-slot {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

/* ==========================================================================
   WIDGET ANIMADO ADVERTS BLACK FRIDAY (EXCLUSIVO ATMÓSFERA BLACK FRIDAY)
   Adaptado con animación cinética SVG y estroboscópica (Inspirado en Codepen dyBGLPo)
   ========================================================================== */
.motocard-black-friday-slot {
  display: none;
  width: 100%;
  max-width: 280px;
  margin: 14px auto 0 auto;
  position: relative;
  pointer-events: auto;
  user-select: none;
}

body[data-atmosphere="black_friday"] .motocard-black-friday-slot {
  display: block;
  animation: bfSlotFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes bfSlotFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.bf-advert-box {
  position: relative;
  background: linear-gradient(165deg, rgba(20, 11, 0, 0.96) 0%, rgba(8, 4, 0, 0.98) 100%);
  border: 1.5px solid #FF9100;
  border-radius: 16px;
  padding: 24px 12px 14px 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 145, 0, 0.22), inset 0 1px 0 rgba(255, 214, 0, 0.3);
  overflow: hidden;
  text-align: center;
  backdrop-filter: blur(12px);
}

/* Líneas Cinéticas Superior e Inferior (Codepen box--1) */
.bf-text-line {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 10;
}

.bf-text-line--top {
  top: -1px;
}

.bf-text-line--bottom {
  bottom: -1px;
}

.bf-text-line span {
  font-family: var(--font-heading-family), sans-serif;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #FF3D00;
  color: #000;
  padding: 2px 14px;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 2px 8px rgba(255, 61, 0, 0.5);
}

.bf-text-line--bottom span {
  border-radius: 6px 6px 0 0;
  background: #FF9100;
}

/* Ruedas Concéntricas SVG Giratorias (Codepen box--3) */
.bf-wheel-wrap {
  position: relative;
  width: 236px;
  height: 236px;
  margin: 6px auto 6px auto;
}

.bf-svg-canvas {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.bf-ring-outer {
  transform-origin: 160px 160px;
  animation: bfRotate 28s linear infinite;
}

.bf-ring-mid {
  transform-origin: 160px 160px;
  animation: bfRotateReverse 20s linear infinite;
}

.bf-ring-inner {
  transform-origin: 160px 160px;
  animation: bfRotate 15s linear infinite;
}

@keyframes bfRotate {
  to { transform: rotate(360deg); }
}

@keyframes bfRotateReverse {
  to { transform: rotate(-360deg); }
}

/* Pausa suave al pasar el cursor (Codepen) */
.bf-advert-box:hover .bf-ring-outer,
.bf-advert-box:hover .bf-ring-mid,
.bf-advert-box:hover .bf-ring-inner {
  animation-play-state: paused;
}

/* Núcleo Central del Badge */
.bf-wheel-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: radial-gradient(circle, #240e00 0%, #0a0400 100%);
  border: 2px solid #FFD600;
  box-shadow: 0 0 16px rgba(255, 214, 0, 0.4), inset 0 0 10px rgba(255, 61, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}

.bf-core-sub {
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #FFA726;
}

.bf-core-pct {
  font-family: var(--font-heading-family), sans-serif;
  font-size: 1.65rem;
  font-weight: 900;
  color: #FFFFFF;
  line-height: 0.95;
  text-shadow: 0 0 10px rgba(255, 145, 0, 0.8);
}

.bf-core-off {
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #FF3D00;
}

/* Ticker Estroboscópico de Descuentos (Codepen box--4) */
.bf-strobe-strip {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 8px 0 10px 0;
}

.bf-strobe-chip {
  font-family: var(--font-heading-family), sans-serif;
  font-size: 0.72rem;
  font-weight: 900;
  padding: 3px 6px;
  border-radius: 4px;
  background: #000;
  color: #FFB300;
  border: 1px solid rgba(255, 179, 0, 0.4);
  animation: bfStrobe 2.8s linear infinite;
}

.bf-strobe-chip:nth-child(2) { animation-delay: 0.7s; }
.bf-strobe-chip:nth-child(3) { animation-delay: 1.4s; }

@keyframes bfStrobe {
  0%, 18% {
    background: #FF3D00;
    color: #000;
    border-color: #FFD600;
    box-shadow: 0 0 10px rgba(255, 61, 0, 0.8);
    transform: scale(1.06);
  }
  20%, 100% {
    background: #000;
    color: #FFB300;
    border-color: rgba(255, 179, 0, 0.35);
    box-shadow: none;
    transform: scale(1);
  }
}

/* Botón CTA con efecto hover slide-up (Codepen card__btn) */
.bf-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #FF9100;
  color: #000 !important;
  text-decoration: none;
  font-family: var(--font-heading-family), sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #FFD600;
  box-shadow: 0 4px 14px rgba(255, 145, 0, 0.35);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.bf-cta-btn:hover {
  background: #FF3D00;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 61, 0, 0.6);
}

.bf-cta-sub {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 6px;
  font-weight: 600;
}

@media (max-width: 989px) {
  .motocard-black-friday-slot {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

/* ==========================================================================
   PAGINACIÓN DEL CATÁLOGO JN BIKERS (25 PRODUCTOS POR VISTA)
   ========================================================================== */
.motocard-pagination {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
}
.motocard-pagination__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
}
.motocard-pagination__info {
  font-size: 0.9rem;
  color: #94a3b8;
  text-align: center;
  letter-spacing: 0.02em;
}
.motocard-pagination__info strong {
  color: #00B1DD;
}
.motocard-pagination__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.motocard-pagination__nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e2e8f0;
  padding: 9px 18px;
  border-radius: 8px;
  font-family: var(--font-heading-family);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.motocard-pagination__nav:hover:not(:disabled) {
  background: rgba(0, 177, 221, 0.15);
  border-color: #00B1DD;
  color: #00E5FF;
  transform: translateY(-1px);
}
.motocard-pagination__next {
  background: #00B1DD;
  color: #03141c;
  border-color: #00B1DD;
  font-weight: 800;
  box-shadow: 0 0 16px rgba(0, 177, 221, 0.35);
}
.motocard-pagination__next:hover:not(:disabled) {
  background: #38bdf8;
  color: #000;
  border-color: #38bdf8;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.55);
}
.motocard-pagination__nav:disabled,
.motocard-pagination__nav.is-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}
.motocard-pagination__pages {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.motocard-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  border-radius: 8px;
  font-family: var(--font-heading-family);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.motocard-pagination__btn:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.motocard-pagination__btn.is-active {
  background: #00B1DD;
  color: #03141c;
  border-color: #00B1DD;
  font-weight: 800;
  box-shadow: 0 0 14px rgba(0, 177, 221, 0.45);
}
.motocard-pagination__dots {
  color: #64748b;
  font-weight: 700;
  padding: 0 4px;
  user-select: none;
}
@media (max-width: 640px) {
  .motocard-pagination__controls {
    width: 100%;
    justify-content: space-between;
  }
  .motocard-pagination__nav {
    padding: 8px 12px;
    font-size: 0.8rem;
  }
  .motocard-pagination__btn {
    min-width: 32px;
    height: 32px;
    font-size: 0.8rem;
    padding: 0 6px;
  }
}

/* ==============================================================================
   🐱 LOGICAT MOBILE SUITE (RESPONSIVE ULTRA-REFINADO 'WITHOUT THOUGHT' - MOE & NELSON)
   - Cero recarga visual: respiro, proporción y ergonomía móvil.
   - En escritorio (min-width: 990px) se mantiene 100% idéntico y sin alteraciones.
   ============================================================================== */

/* 1. VISIBILIDAD DE CONTROLES EXCLUSIVOS ESCRITORIO / MÓVIL */
.motocard-btn-filter-mobile,
.motocard-filters__close-mobile,
.motocard-filters__mobile-footer,
.hero-sim-mobile {
  display: none !important;
}

@media (max-width: 989px) {
  /* OCULTAR SIMULADOR DE LUZ Y BANNER PROMOCIONAL EN MÓVIL Y TABLET (SOLICITUD EXPRESA PARA ELIMINAR SATURACIÓN VISUAL) */
  #simulador-luz,
  #banner-promocional,
  .motocard-subnav__link[href="#simulador-luz"],
  .motocard-menu-item[href="#simulador-luz"],
  .hero-sim-desktop {
    display: none !important;
  }
  .hero-sim-mobile {
    display: inline-flex !important;
  }

  /* BOTÓN DE FILTROS EN TOOLBAR MÓVIL */
  .motocard-btn-filter-mobile {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 14px !important;
    background: rgba(0, 177, 221, 0.12) !important;
    border: 1px solid rgba(0, 177, 221, 0.45) !important;
    color: #00E5FF !important;
    border-radius: 8px !important;
    font-family: var(--font-heading-family) !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }
  .motocard-btn-filter-mobile:hover,
  .motocard-btn-filter-mobile:active {
    background: #00B1DD !important;
    color: #03141c !important;
    border-color: #00B1DD !important;
  }
  .motocard-btn-filter-mobile svg {
    stroke: currentColor !important;
  }
  .motocard-btn-filter-mobile .filter-count-badge {
    background: #00B1DD !important;
    color: #03141c !important;
    font-size: 0.7rem !important;
    padding: 1px 6px !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
  }
  .motocard-btn-filter-mobile:hover .filter-count-badge {
    background: #03141c !important;
    color: #00E5FF !important;
  }

  /* BARRA LATERAL CONVERTIDA EN BOTTOM SHEET MODAL DESLIZANTE */
  .motocard-shop-sidebar {
    display: none !important;
  }
  .motocard-shop-sidebar.is-open-mobile {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    background: rgba(3, 7, 12, 0.8) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    padding: 0 !important;
    animation: jnFadeIn 0.2s ease-out !important;
  }
  .motocard-shop-sidebar.is-open-mobile .motocard-filters {
    background: #0b111a !important;
    border-radius: 20px 20px 0 0 !important;
    border-top: 2px solid #00B1DD !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    max-height: 82vh !important;
    overflow-y: auto !important;
    padding: 20px 18px 24px !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.85) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    animation: jnSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .motocard-shop-sidebar.is-open-mobile .motocard-xmas-slot,
  .motocard-shop-sidebar.is-open-mobile .motocard-f2r-slot,
  .motocard-shop-sidebar.is-open-mobile .motocard-black-friday-slot {
    display: none !important;
  }
  .motocard-filters__head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: 14px !important;
  }
  .motocard-filters__head-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .motocard-filters__close-mobile {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    font-size: 1rem !important;
    cursor: pointer !important;
  }
  .motocard-filters__mobile-footer {
    display: block !important;
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding-top: 14px !important;
    margin-top: 14px !important;
    background: #0b111a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .motocard-filters__mobile-footer .btn {
    width: 100% !important;
    height: 44px !important;
    font-size: 0.9rem !important;
  }

  /* TOOLBAR DE PRODUCTOS EN MÓVIL */
  .motocard-products-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px 0 !important;
    margin-bottom: 14px !important;
  }
  .motocard-products-count {
    order: 3 !important;
    width: 100% !important;
    font-size: 0.78rem !important;
    color: #94a3b8 !important;
    padding-top: 2px !important;
  }
  .motocard-products-sort {
    order: 2 !important;
  }
  .motocard-products-sort label {
    display: none !important;
  }
  .motocard-products-sort select {
    height: 36px !important;
    font-size: 0.78rem !important;
    padding: 0 10px !important;
  }
}

/* 2. REFINAMIENTO DE PANTALLA CELULAR (max-width: 768px) */
@media (max-width: 768px) {
  /* AVISOS SUPERIORES */
  #AnnouncementBar {
    padding: 4px 8px !important;
    min-height: 28px !important;
    max-height: 32px !important;
    box-sizing: border-box !important;
  }
  .announcement__inner {
    justify-content: center !important;
    padding: 0 !important;
  }
  .announcement__text {
    font-size: 0.72rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
  }
  .announcement__status {
    display: none !important;
  }
  #AnnBarMoto {
    display: none !important;
  }
  #AnnBarEffi {
    padding: 5px 8px !important;
    font-size: 0.72rem !important;
    min-height: 28px !important;
  }

  /* HEADER COMPACTO Y ELEGANTE */
  .motocard-header {
    padding: 6px 10px !important;
    gap: 6px !important;
  }
  .motocard-logo img {
    max-height: 34px !important;
    width: auto !important;
  }
  .motocard-menu-btn {
    padding: 6px 10px !important;
    font-size: 0.74rem !important;
    border-radius: 8px !important;
  }
  .motocard-action-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 6px !important;
    border-radius: 8px !important;
  }
  .motocard-action-btn svg,
  .motocard-action-btn .icon-bespoke {
    width: 18px !important;
    height: 18px !important;
  }
  .motocard-header__search {
    margin-top: 2px !important;
  }
  .motocard-header__search input {
    height: 38px !important;
    font-size: 0.82rem !important;
    border-radius: 999px !important;
  }

  /* SUBNAV DE CATEGORÍAS TÁCTIL */
  .motocard-subnav {
    padding: 0 !important;
  }
  .motocard-subnav__inner {
    padding: 6px 10px !important;
    gap: 5px !important;
  }
  .motocard-subnav__link {
    padding: 5px 10px !important;
    font-size: 0.68rem !important;
  }

  /* HERO: CERO OVERLAP Y FOTO PROTAGONISTA */
  .hero__arrows {
    display: none !important;
  }
  .hero--split {
    --hero-h-m: auto !important;
    min-height: 520px !important;
    padding: 0 !important;
    background: #06090e !important;
  }
  #HeroCarousel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32px;
    background: linear-gradient(0deg, #06090e 55%, transparent 100%);
    pointer-events: none;
    z-index: 2;
  }
  .hero__content {
    max-width: 100% !important;
    padding: 12px 0 20px !important;
  }
  .hero__content .kicker {
    font-size: 0.72rem !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
  }
  .hero__title {
    font-size: clamp(1.6rem, 6.5vw, 1.95rem) !important;
    line-height: 1.14 !important;
    margin-bottom: 6px !important;
  }
  .hero__text {
    font-size: 0.82rem !important;
    line-height: 1.36 !important;
    margin-bottom: 14px !important;
    color: rgba(255, 255, 255, 0.88) !important;
  }
  .hero__text p {
    margin: 0 !important;
  }
  .hero__actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .hero__actions .btn {
    width: 100% !important;
    height: 42px !important;
    font-size: 0.84rem !important;
    border-radius: 10px !important;
    justify-content: center !important;
  }

  /* HUD DE TELEMETRÍA EN TIRA DE CHIPS HORIZONTALES VIDRIO */
  .hero__telemetry-hud {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding: 6px 2px !important;
    margin-top: 12px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    max-width: 100% !important;
  }
  .hero__telemetry-hud::-webkit-scrollbar {
    display: none !important;
  }
  .telemetry-item {
    flex: 0 0 auto !important;
    background: rgba(8, 14, 22, 0.88) !important;
    border: 1px solid rgba(0, 177, 221, 0.35) !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
  .telemetry-item__val {
    font-size: 0.74rem !important;
    color: #00E5FF !important;
    white-space: nowrap !important;
    font-weight: 800 !important;
  }
  .telemetry-item__lbl {
    font-size: 0.65rem !important;
    color: #94a3b8 !important;
    white-space: nowrap !important;
  }

  /* MARQUESINA DE MARCAS COMPACTA */
  .brands-marquee-section {
    padding: 6px 0 !important;
  }
  .brand-pill-btn {
    padding: 6px 12px !important;
    font-size: 0.74rem !important;
  }

  /* SECCIÓN COMBOS AHORRO: TARJETAS PROPORCIONADAS */
  .combos-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .combo-card {
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  .combo-card__media {
    max-height: 180px !important;
    aspect-ratio: 16 / 9 !important;
  }
  .combo-card__body {
    padding: 12px 14px !important;
  }
  .combo-card__body h3 {
    font-size: 1rem !important;
  }
  .combo-card__items {
    font-size: 0.78rem !important;
    gap: 4px !important;
    margin: 8px 0 !important;
  }

  /* SIMULADOR DE HAZ DE LUZ */
  .beam-sim {
    padding: 12px !important;
    border-radius: 12px !important;
  }
  .beam-sim__viewport {
    max-height: 210px !important;
    aspect-ratio: 16 / 9 !important;
    border-radius: 10px !important;
  }
  .beam-controls {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin: 10px 0 !important;
  }
  .beam-btn {
    padding: 6px 8px !important;
    font-size: 0.70rem !important;
  }
  .beam-btn strong {
    font-size: 0.74rem !important;
  }
  .beam-btn span {
    display: none !important;
  }

  /* TRABAJOS EN MOTO REAL */
  .works__track {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 190px !important;
    gap: 10px !important;
  }
  .works__card {
    border-radius: 12px !important;
  }

  /* UBICACIÓN Y MAPA */
  .map-frame,
  iframe[src*="google.com/maps"] {
    height: 220px !important;
    border-radius: 12px !important;
  }

  /* FOOTER COMPACTO */
  .footer {
    padding: 24px 0 36px !important;
  }
  .footer__grid {
    gap: 20px !important;
  }

  /* OPTIMIZACIÓN DE ANIMACIONES Y BATERÍA EN CELULARES */
  .whatsapp-float {
    animation: none !important;
    box-shadow: 0 4px 18px rgba(37, 211, 102, 0.45) !important;
  }
}

/* ANIMACIONES SUAVES DE ENTRADA */
@keyframes jnSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes jnFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Enlace y Contenedor Logicat en Footer (Desplazado a la izquierda para evitar solapamiento con WhatsApp) */
.footer-credit-wrap {
  margin-right: 90px !important;
  display: inline-flex !important;
  align-items: center !important;
}

@media (max-width: 989px) {
  .footer-credit-wrap {
    margin-right: 0 !important;
    padding-bottom: 28px !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

.footer-logicat-link {
  color: #00E5FF !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
.footer-logicat-link:hover {
  color: #ffffff !important;
  text-shadow: 0 0 12px rgba(0, 229, 255, 0.85) !important;
  text-decoration: underline !important;
}