/* ==========================================================================
   MODELO 5 — DIRECTO / COMERCIAL (Alta Densidad, Rápido, Amarillo Industrial)
   ========================================================================== */

:root {
  --m5-primary: #D97706;
  --m5-primary-dark: #B45309;
  --m5-yellow: #F59E0B;
  --m5-bg: #F3F4F6;
  --m5-surface: #FFFFFF;
  --m5-text: #111827;
  --m5-muted: #4B5563;
  --m5-border: #D1D5DB;
  --m5-radius: 4px;
}

body.theme-m5 {
  background-color: var(--m5-bg);
  color: var(--m5-text);
  font-family: 'Inter', sans-serif;
}

.theme-m5 .hero-title, .theme-m5 .section-title, .theme-m5 .card-title {
  font-weight: 800;
  letter-spacing: -0.3px;
}

/* HEADER COMERCIAL DE ALTO CONTRASTE */
.theme-m5 .site-header.header-solid {
  background: #111827;
  border-bottom: 3px solid var(--m5-yellow);
  color: #FFF;
}
.theme-m5 .site-header.header-solid .header-brand {
  color: #FFF;
}
.theme-m5 .site-header.header-solid .nav-link {
  color: #E5E7EB;
}
.theme-m5 .site-header.header-solid .nav-link:hover, .theme-m5 .site-header.header-solid .nav-link.active {
  background: #374151;
  color: var(--m5-yellow);
}
.theme-m5 .cart-count-badge {
  background: var(--m5-yellow);
  color: #111827;
  font-weight: 800;
}
.theme-m5 .nav-btn-install {
  background: var(--m5-yellow);
  color: #000000;
  border-radius: 4px;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
}
.theme-m5 .nav-btn-install:hover {
  background: #FACC15;
}

/* HERO COMERCIAL DE IMPACTO DIRECTO */
.theme-m5 .hero-overlay-gradient {
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.75) 0%, rgba(17, 24, 39, 0.95) 100%);
}
.theme-m5 .hero-badge {
  background: var(--m5-yellow);
  color: #111827;
  border: none;
  font-weight: 800;
  border-radius: 4px;
}
.theme-m5 .btn-hero-primary {
  background: var(--m5-yellow);
  color: #111827;
  border-radius: 4px;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

/* PRODUCTOS DESTACADOS — BANNERS PROMO INDUSTRIALES */
.theme-m5 .featured-showcase-card {
  background: #FFFFFF;
  border: 2px solid var(--m5-yellow);
  border-radius: 4px;
  padding: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.theme-m5 .featured-showcase-card .card-img-wrapper {
  background: #F9FAFB;
  height: 190px;
  border: 1px solid #E5E7EB;
}
.theme-m5 .featured-badge {
  background: #111827;
  color: var(--m5-yellow);
  border-radius: 2px;
  font-weight: 800;
}

/* PRODUCTOS NORMALES — TILES COMPACTOS DE ALTA DENSIDAD */
.theme-m5 .catalog-products-grid .nexxis-card {
  background: var(--m5-surface);
  border: 1px solid var(--m5-border);
  border-radius: var(--m5-radius);
}
.theme-m5 .catalog-products-grid .nexxis-card:hover {
  border-color: #111827;
}
.theme-m5 .card-img-wrapper {
  background: #F9FAFB;
  height: 175px;
}
.theme-m5 .card-price {
  background: #FEF3C7;
  color: #92400E;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 800;
}
.theme-m5 .btn-add-card {
  background: #111827;
  color: #FFF;
  border-radius: 3px;
}
.theme-m5 .btn-add-card:hover {
  background: var(--m5-primary-dark);
}
.theme-m5 .cat-btn.active {
  background: #111827;
  color: var(--m5-yellow);
  border-radius: 3px;
}

.theme-m5 .btn-add-detail, .theme-m5 .btn-checkout-primary, .theme-m5 .btn-catalog-cta {
  background: #111827;
  border-bottom: 3px solid var(--m5-primary);
  border-radius: 4px;
  color: #FFF;
}
.theme-m5 .btn-add-detail:hover, .theme-m5 .btn-checkout-primary:hover, .theme-m5 .btn-catalog-cta:hover {
  background: var(--m5-primary);
  color: #111827;
}