/*==================================================================
  HOME v2 — Rediseño visual basado en mockup Stitch
  Mantiene Bootstrap 5; agrega variables, tipografía Inter y utilities.
==================================================================*/

:root {
  /* ===== Paleta principal ===== */
  --hv-primary:           #1e88e5;
  --hv-primary-container: #d3e4ff;
  --hv-primary-dark:      #004881;
  --hv-on-primary:        #ffffff;

  /* ===== Superficies ===== */
  --hv-surface:           #f9f9f9;
  --hv-surface-lowest:    #ffffff;
  --hv-surface-low:       #f3f3f3;
  --hv-surface-container: #eeeeee;
  --hv-surface-bright:    #f8f9fa;

  /* ===== Texto ===== */
  --hv-on-surface:         #1b1b1b;
  --hv-on-surface-variant: #404752;
  --hv-outline:            #707783;
  --hv-outline-variant:    #c0c7d4;

  /* ===== Estados ===== */
  --hv-error:   #ba1a1a;
  --hv-success: #4caf50;

  /* ===== Banner / Servicios ===== */
  --hv-dark-blue:    #0d2847;
  --hv-dark-deep:    #0b1c30;
  --hv-cyan-accent:  #00ffff;

  /* ===== WhatsApp ===== */
  --hv-whatsapp: #25d366;

  /* ===== Colores de tiles categorías ===== */
  --hv-cat-compu:    #1e88e5;
  --hv-cat-gaming:   #9c27b0;
  --hv-cat-cables:   #ff9800;
  --hv-cat-electro:  #4caf50;
  --hv-cat-impre:    #e91e63;
  --hv-cat-energy:   #ffc107;
  --hv-cat-security: #475569;
  --hv-cat-pos:      #00acc1;
  --hv-cat-sol:      #6366f1;
  --hv-cat-compo:    #ef5350;

  /* ===== Radios ===== */
  --hv-radius-sm:  0.5rem;
  --hv-radius-md:  0.75rem;
  --hv-radius-lg:  1rem;
  --hv-radius-xl:  1.25rem;
  --hv-radius-2xl: 1.5rem;
  --hv-radius-pill: 9999px;

  /* ===== Espaciados ===== */
  --hv-container-max: 1280px;
  --hv-gutter:        24px;
  --hv-section-py:    80px;

  /* ===== Sombras ===== */
  --hv-shadow-sm: 0 2px 8px rgba(0,0,0,.04);
  --hv-shadow:    0 4px 12px rgba(0,0,0,.06);
  --hv-shadow-lg: 0 10px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.06);
  --hv-shadow-xl: 0 20px 40px -10px rgba(0,0,0,.18);

  /* ===== Transiciones ===== */
  --hv-trans-fast: .15s ease;
  --hv-trans:      .3s ease;
}

/*==================================================================
  Tipografía Inter (aplica solo dentro de .hv-scope)
==================================================================*/
.hv-scope,
.hv-scope * {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* IMPORTANTE: Restaurar fuentes de íconos sobre la regla universal anterior.
   Sin esto, los <i class="fas fa-..."> renderizan con Inter y no muestran glyph. */
.hv-scope .fa,
.hv-scope .fas,
.hv-scope .far,
.hv-scope .fab,
.hv-scope .fal,
.hv-scope .fad,
.hv-scope i[class*="fa-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands",
               "Font Awesome 5 Free", "Font Awesome 5 Brands",
               FontAwesome !important;
}
.hv-scope .material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
}

.hv-scope { color: var(--hv-on-surface); }

/* Escala tipográfica */
.hv-display-lg { font-size: 48px; line-height: 56px; font-weight: 700; letter-spacing: -0.02em; }
.hv-headline-lg { font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -0.01em; }
.hv-headline-md { font-size: 24px; line-height: 32px; font-weight: 600; }
.hv-headline-sm { font-size: 20px; line-height: 28px; font-weight: 600; }
.hv-body-lg { font-size: 18px; line-height: 28px; font-weight: 400; }
.hv-body-md { font-size: 16px; line-height: 24px; font-weight: 400; }
.hv-body-sm { font-size: 14px; line-height: 20px; font-weight: 400; }
.hv-label-md { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0.05em; }
.hv-label-sm { font-size: 12px; line-height: 16px; font-weight: 500; }

@media (max-width: 767.98px) {
  .hv-display-lg { font-size: 32px; line-height: 40px; }
  .hv-headline-lg { font-size: 24px; line-height: 32px; }
}

/*==================================================================
  Contenedor base
==================================================================*/
.hv-container {
  max-width: var(--hv-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 992px) {
  .hv-container { padding-left: 40px; padding-right: 40px; }
}

/*==================================================================
  Card de producto (reutilizable: destacados, nuevos ingresos)
==================================================================*/
.hv-card {
  background: var(--hv-surface-lowest);
  border: 1px solid var(--hv-outline-variant);
  border-radius: var(--hv-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--hv-trans), transform var(--hv-trans);
}
.hv-card:hover {
  box-shadow: var(--hv-shadow-lg);
  transform: translateY(-2px);
}

.hv-card-img-wrap {
  position: relative;
  background: var(--hv-surface-low);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.hv-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .4s ease;
}
.hv-card:hover .hv-card-img-wrap img { transform: scale(1.05); }

.hv-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  color: #fff;
  letter-spacing: .03em;
}
.hv-badge-off  { background: var(--hv-error); }
.hv-badge-new  { background: var(--hv-success); }
.hv-badge-stock{ background: #424242; }

.hv-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.hv-card-brand {
  font-size: 11px;
  color: var(--hv-outline);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
}
.hv-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--hv-on-surface);
  line-height: 20px;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 40px;
}
.hv-card-foot { margin-top: auto; }
.hv-price-old {
  font-size: 12px;
  color: var(--hv-outline);
  text-decoration: line-through;
  margin: 0;
}
.hv-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--hv-primary);
  margin: 0 0 12px;
}
.hv-card-actions {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.hv-btn-cart {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  min-height: 36px;
  background: var(--hv-primary);
  color: #fff;
  border: none;
  border-radius: var(--hv-radius-md);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-align: center;
  cursor: pointer;
  transition: background var(--hv-trans-fast);
  white-space: nowrap;
  line-height: 1.2;
}
.hv-btn-cart:hover {
  background: var(--hv-primary-dark);
  color: #fff;
}
.hv-card-icons {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.hv-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--hv-radius-md);
  background: var(--hv-surface-low);
  border: 1px solid var(--hv-outline-variant);
  color: var(--hv-on-surface-variant) !important;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none !important;
  transition: all var(--hv-trans-fast);
}
.hv-icon-btn:hover {
  background: var(--hv-primary-container);
  border-color: var(--hv-primary);
  color: var(--hv-primary) !important;
}
.hv-icon-btn .fa-heart.text-danger {
  color: #dc3545 !important;
}

/*==================================================================
  Sección genérica (encabezado + grid)
==================================================================*/
.hv-section {
  padding: 60px 0;
}
@media (min-width: 992px) {
  .hv-section { padding: var(--hv-section-py) 0; }
}

.hv-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}
.hv-section-head h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--hv-on-surface);
  letter-spacing: -0.01em;
}
@media (min-width: 992px) {
  .hv-section-head h2 { font-size: 32px; }
}
.hv-link-more {
  color: var(--hv-primary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--hv-trans-fast);
}
.hv-link-more:hover { gap: 10px; color: var(--hv-primary-dark) !important; }

.hv-grid-4 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
}
@media (min-width: 576px) { .hv-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .hv-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

/*==================================================================
  Helpers
==================================================================*/
.hv-bg-surface { background: var(--hv-surface-lowest); }
.hv-bg-soft    { background: var(--hv-surface-bright); }

/*==================================================================
  Toggle Grid/List
==================================================================*/
.hv-view-toggle {
  display: inline-flex;
  background: var(--hv-surface-lowest);
  border: 1px solid var(--hv-outline-variant);
  border-radius: var(--hv-radius-md);
  overflow: hidden;
}
.hv-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  color: var(--hv-on-surface-variant);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--hv-trans-fast), color var(--hv-trans-fast);
}
.hv-view-btn:hover { color: var(--hv-primary); }
.hv-view-btn.is-active,
.hv-view-btn.bg-white {
  background: var(--hv-primary);
  color: #fff;
}

/*==================================================================
  Vista LIST
==================================================================*/
.hv-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hv-list-row {
  display: flex;
  gap: 16px;
  align-items: center;
  background: var(--hv-surface-lowest);
  border: 1px solid var(--hv-outline-variant);
  border-radius: var(--hv-radius-md);
  padding: 12px 16px;
  transition: box-shadow var(--hv-trans-fast);
}
.hv-list-row:hover { box-shadow: var(--hv-shadow); }

.hv-list-img {
  flex-shrink: 0;
  width: 110px;
  height: 110px;
  background: var(--hv-surface-low);
  border-radius: var(--hv-radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hv-list-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hv-list-info {
  flex: 1;
  min-width: 0;
}
.hv-list-title-link { text-decoration: none !important; }
.hv-list-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--hv-on-surface) !important;
  margin: 0 0 4px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hv-list-desc {
  font-size: 13px;
  color: var(--hv-on-surface-variant);
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hv-list-price .hv-price-strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--hv-primary);
}
.hv-list-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
@media (max-width: 575.98px) {
  .hv-list-img { width: 80px; height: 80px; }
  .hv-list-desc { display: none; }
  .hv-list-title { font-size: 13px; }
}

/* Animación hover-lift global */
.hv-hover-lift {
  transition: transform var(--hv-trans), box-shadow var(--hv-trans);
}
.hv-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--hv-shadow-lg);
}

/*==================================================================
  Search Autocomplete (dropdown de sugerencias en el navbar)
==================================================================*/
.sac-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--hv-outline-variant);
  border-radius: var(--hv-radius-md);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  z-index: 1060;
  max-height: 70vh;
  overflow-y: auto;
  display: none;
  font-family: 'Inter', sans-serif;
}
.sac-dropdown.is-open { display: block; }

.sac-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(192,199,212,.25);
  transition: background .12s ease;
}
.sac-item:hover,
.sac-item.is-active {
  background: rgba(30,136,229,.06);
}
.sac-item-img {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--hv-surface-low);
  border-radius: var(--hv-radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sac-item-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sac-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.sac-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--hv-on-surface) !important;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sac-item-brand {
  font-size: 11px;
  color: var(--hv-outline);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 1px;
}
.sac-item-price {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--hv-primary);
  white-space: nowrap;
}
.sac-empty {
  padding: 16px 14px;
  font-size: 13px;
  color: var(--hv-on-surface-variant);
  text-align: center;
}
.sac-footer {
  padding: 10px 14px;
  background: var(--hv-surface-low);
  position: sticky;
  bottom: 0;
}
.sac-see-all {
  width: 100%;
  background: none;
  border: none;
  color: var(--hv-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px;
  text-align: center;
  font-family: 'Inter', sans-serif;
}
.sac-see-all:hover { text-decoration: underline; }

@media (max-width: 575.98px) {
  .sac-item-price { display: none; }
  .sac-item-img { width: 38px; height: 38px; }
}

/*==================================================================
  Responsive — Tablet (768–991px)
==================================================================*/
@media (max-width: 991.98px) {
  .hv-section { padding: 48px 0; }
  .hv-section-head { margin-bottom: 24px; }
  .hv-section-head h2 { font-size: 22px; }
  .hv-card-title { font-size: 13px; }
  .hv-price { font-size: 16px; }
  .hv-btn-cart { padding: 9px 10px; font-size: 13px; }
}

/*==================================================================
  Responsive — Móvil (<768px)
==================================================================*/
@media (max-width: 767.98px) {
  .hv-section { padding: 32px 0; }
  .hv-section-head { margin-bottom: 20px; }
  .hv-section-head h2 { font-size: 18px; letter-spacing: 0; }
  .hv-link-more { font-size: 13px; }

  .hv-card-img-wrap { aspect-ratio: 4 / 3; }
  .hv-card-body { padding: 12px; }
  .hv-card-title { font-size: 12px; line-height: 16px; min-height: 32px; }
  .hv-card-brand { font-size: 10px; }
  .hv-price { font-size: 15px; margin-bottom: 8px; }
  .hv-price-old { font-size: 11px; }
  .hv-btn-cart { padding: 8px; font-size: 12px; }
  .hv-card-badge { top: 8px; left: 8px; font-size: 10px; padding: 3px 6px; }
}

/*==================================================================
  Móvil chico (<480px) — grid de 2 columnas
==================================================================*/
@media (max-width: 575.98px) {
  .hv-grid-4 { gap: 12px; }
  .hv-container { padding-left: 12px; padding-right: 12px; }
}