/* ═══════════════════════════════════════════════════════════════
   S4X4 – productos.css
   Estilos específicos de la subpágina Catálogo de Productos
   ═══════════════════════════════════════════════════════════════ */

/* ── Link activo en navbar ─── */
.navbar__link--active {
  color: var(--c-white);
}
.navbar__link--active::after {
  width: 100%;
  background: var(--c-red);
}

/* ── Page Hero ─────────────────────────────────────────────── */
.page-hero {
  padding-block-start: calc(var(--navbar-h) + var(--sp-xl));
  padding-block-end:   var(--sp-lg);
  background: var(--c-black);
  border-bottom: 1px solid var(--c-line);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/images/products/pf-v1-dmax-2020/img-1.jpg') center/cover no-repeat;
  opacity: 0.18;
  z-index: 0;
}
.page-hero .container { position: relative; z-index: 1; }

.page-hero__content { max-width: 780px; }

.breadcrumb {
  font-size:      var(--fs-badge);
  letter-spacing: 0.12em;
  color:          var(--c-text-dim);
  margin-bottom:  var(--sp-md);
  display:        flex;
  align-items:    center;
  gap:            0.3rem;
  text-transform: uppercase;
}
.breadcrumb a {
  color:      var(--c-text-dim);
  transition: color var(--dur) var(--ease);
}
.breadcrumb a:hover { color: var(--c-red); }

.page-hero__title {
  font-family:    var(--f-display);
  font-size:      clamp(3rem, 7vw, 5.5rem);
  line-height:    1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color:          var(--c-white);
  margin-bottom:  var(--sp-md);
}

.page-hero__sub {
  max-width:   540px;
  color:       var(--c-text-body);
  font-size:   var(--fs-lead);
  line-height: 1.7;
}

/* ── Barra de filtros ──────────────────────────────────────── */
.prod-filter-bar {
  position:      static;
  z-index:       100;
  background:    rgba(0,0,0,0.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--c-line-strong);
  padding-block: 1rem;
}

/* ── Buscador inteligente ──────────────────────────────────── */
.search-wrap {
  position:    relative;
  display:     flex;
  align-items: center;
  margin-bottom: var(--sp-md);
}
.search-icon {
  position:    absolute;
  left:        0.9rem;
  width:       1rem;
  height:      1rem;
  color:       var(--c-text-dim);
  pointer-events: none;
  flex-shrink: 0;
}
.search-input {
  width:          100%;
  background:     var(--c-surface-1);
  border:         1px solid var(--c-line);
  border-radius:  var(--radius);
  color:          var(--c-white);
  font-size:      0.7rem;
  letter-spacing: 0.06em;
  padding:        0.65em 2.8rem 0.65em 2.4rem;
  outline:        none;
  transition:     border-color var(--dur) var(--ease);
}
.search-input::placeholder { color: var(--c-text-dim); }
.search-input:focus         { border-color: var(--c-red); }
.search-clear {
  position:   absolute;
  right:      0.75rem;
  background: transparent;
  border:     none;
  color:      var(--c-text-dim);
  cursor:     pointer;
  font-size:  0.75rem;
  line-height: 1;
  padding:    0;
  transition: color var(--dur) var(--ease);
}
.search-clear:hover { color: var(--c-white); }

.prod-filter-bar__inner {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--sp-md);
  align-items: center;
}

.filter-group {
  display:     flex;
  align-items: center;
  gap:         var(--sp-sm);
  flex-wrap:   wrap;
}

.filter-group__label {
  font-size:      var(--fs-badge);
  letter-spacing: 0.18em;
  color:          var(--c-text-dim);
  white-space:    nowrap;
  flex-shrink:    0;
}

.filter-pills {
  display:  flex;
  flex-wrap: wrap;
  gap:       6px;
}

/* Pill: botón de filtro individual */
.pill {
  font-family:    var(--f-mono);
  font-size:      var(--fs-badge);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--c-text-muted);
  padding:        0.45em 1em;
  border:         1px solid var(--c-line);
  border-radius:  var(--radius);
  background:     transparent;
  cursor:         pointer;
  white-space:    nowrap;
  transition:
    color        var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    background   var(--dur) var(--ease);
}
.pill:hover {
  color:        var(--c-white);
  border-color: var(--c-line-strong);
}
.pill--active,
.pill[aria-pressed="true"] {
  color:        var(--c-white);
  border-color: var(--c-red);
  background:   rgba(225,30,38,0.1);
}

/* Divisor entre grupos de filtro */
.filter-group + .filter-group {
  padding-left:  var(--sp-md);
  border-left:   1px solid var(--c-line);
}

/* ── Catálogo grid ─────────────────────────────────────────── */
.prod-catalog {
  padding-block: var(--sp-xl);
  background:    var(--c-black);
}

.prod-count {
  color:          var(--c-text-dim);
  font-size:      var(--fs-badge);
  letter-spacing: 0.12em;
  margin-bottom:  var(--sp-md);
  text-transform: uppercase;
}

.prod-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:                   1px;
  background:            var(--c-line);
  border:                1px solid var(--c-line);
}

/* ── Tarjeta de producto ─── */
.prod-card {
  display:        flex;
  flex-direction: column;
  background:     var(--c-black);
  transition:     background var(--dur) var(--ease);
}
.prod-card:hover            { background: var(--c-surface-2); }
.prod-card--soon            { opacity: 0.72; }
.prod-card--soon:hover      { opacity: 1; }

/* Galería de imágenes */
.prod-gallery {
  position:    relative;
  aspect-ratio: 4 / 3;
  overflow:    hidden;
  background:  var(--c-surface-2);
  flex-shrink: 0;
}

.prod-gallery__placeholder {
  width:  100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(225,30,38,0.06) 0%, transparent 65%),
    var(--c-surface-2);
}

.gallery-track {
  position: relative;
  width:    100%;
  height:   100%;
}

.gallery-img {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  opacity:    0;
  transition: opacity 0.35s var(--ease);
}
.gallery-img--active { opacity: 1; }
.gallery-img--error  { display: none; }

/* Si todas las imágenes fallan, mostrar fondo placeholder */
.gallery-track:not(:has(.gallery-img:not(.gallery-img--error))) {
  background:
    radial-gradient(ellipse at 50% 55%, rgba(225,30,38,0.06) 0%, transparent 65%),
    var(--c-surface-2);
}

/* Botones prev / next */
.gallery-nav {
  position:   absolute;
  top:        50%;
  transform:  translateY(-50%);
  z-index:    10;
  background: rgba(0,0,0,0.55);
  border:     1px solid var(--c-line);
  color:      var(--c-white);
  font-size:  1.4rem;
  line-height: 1;
  padding:    0.1em 0.45em 0.15em;
  cursor:     pointer;
  opacity:    0;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}
.gallery-nav--prev { left:  0.5rem; }
.gallery-nav--next { right: 0.5rem; }
.prod-gallery:hover .gallery-nav { opacity: 1; }
.gallery-nav:hover { background: rgba(225,30,38,0.7); }

/* Puntos de navegación */
.gallery-dots {
  position:        absolute;
  bottom:          0.55rem;
  left:            50%;
  transform:       translateX(-50%);
  display:         flex;
  gap:             5px;
  z-index:         10;
}
.gallery-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    rgba(255,255,255,0.3);
  border:        none;
  cursor:        pointer;
  padding:       0;
  transition:    background var(--dur) var(--ease);
}
.gallery-dot--active { background: var(--c-red); }

/* SKU badge */
.prod-card__code {
  position:       absolute;
  bottom:         var(--sp-xs);
  right:          var(--sp-xs);
  background:     rgba(0,0,0,0.82);
  color:          var(--c-text-dim);
  font-size:      0.5rem;
  letter-spacing: 0.1em;
  padding:        0.2em 0.5em;
  border:         1px solid var(--c-line);
  backdrop-filter: blur(4px);
  z-index:        5;
}

/* Cuerpo de tarjeta */
.prod-card__body {
  display:        flex;
  flex-direction: column;
  gap:            0.6rem;
  padding:        var(--sp-md);
  flex:           1;
}

.prod-card__cat {
  font-size:      0.56rem;
  letter-spacing: 0.22em;
  color:          var(--c-red);
}

.prod-card__name {
  font-family:    var(--f-sub);
  font-size:      clamp(1rem, 2vw, 1.3rem);
  font-weight:    700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color:          var(--c-white);
  line-height:    1.15;
}

.prod-card__compat {
  font-size:      0.58rem;
  letter-spacing: 0.08em;
  color:          var(--c-text-dim);
  line-height:    1.55;
}

/* Precio */
.prod-card__price {
  display:     flex;
  flex-wrap:   wrap;
  align-items: baseline;
  gap:         0.4rem;
  margin-block: 0.15rem;
}
.price-value {
  font-family:    var(--f-display);
  font-size:      clamp(1.4rem, 3vw, 1.9rem);
  color:          var(--c-white);
  letter-spacing: 0.03em;
  line-height:    1;
}
.price-unit {
  font-size:   0.75em;
  color:       var(--c-text-muted);
  font-family: var(--f-sub);
}
.price-note {
  font-size:      0.56rem;
  letter-spacing: 0.1em;
  color:          var(--c-text-dim);
  display:        block;
  width:          100%;
}
.prod-card__price--soon {
  font-size:      0.6rem;
  letter-spacing: 0.22em;
  color:          var(--c-text-dim);
}

/* Descripción comercial */
.prod-card__desc {
  font-size:   0.78rem;
  line-height: 1.65;
  color:       var(--c-text-body);
}

/* Lista de características */
.prod-card__specs {
  font-size:      0.6rem;
  letter-spacing: 0.06em;
  color:          var(--c-text-dim);
  display:        flex;
  flex-direction: column;
  gap:            5px;
  padding-top:    0.6rem;
  border-top:     1px solid var(--c-line);
  flex:           1;
}
.prod-card__specs li::before {
  content: '— ';
  color:   var(--c-red);
}

.prod-card__cta {
  align-self: flex-start;
  margin-top: auto;
  padding:    0.7em 1.4em;
}

/* ── Sin resultados ─── */
.prod-empty {
  padding:      var(--sp-xl);
  text-align:   center;
  display:      flex;
  flex-direction: column;
  align-items:  center;
  gap:          var(--sp-md);
  border:       1px solid var(--c-line);
}
.prod-empty .mono-text {
  color:          var(--c-text-dim);
  font-size:      0.72rem;
  letter-spacing: 0.14em;
}

/* ── CTA strip distribuidores ──────────────────────────────── */
.prod-cta-strip {
  background:    var(--c-surface-1);
  border-block:  1px solid var(--c-line);
  padding-block: var(--sp-xl);
}

.prod-cta-strip__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--sp-lg);
  flex-wrap:       wrap;
}

.prod-cta-strip__eyebrow {
  font-size:      var(--fs-badge);
  letter-spacing: 0.18em;
  color:          var(--c-red);
  margin-bottom:  var(--sp-xs);
}

.prod-cta-strip__title {
  font-family:    var(--f-display);
  font-size:      clamp(1.6rem, 3vw, 2.4rem);
  line-height:    1.05;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color:          var(--c-white);
  margin-bottom:  var(--sp-sm);
}

.prod-cta-strip__text { max-width: 600px; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .filter-group + .filter-group {
    padding-left: 0;
    border-left:  none;
    padding-top:  var(--sp-sm);
    border-top:   1px solid var(--c-line);
  }

  .prod-cta-strip__inner {
    flex-direction: column;
    align-items:    flex-start;
  }

  .prod-cta-strip__inner .btn { width: 100%; justify-content: center; }

  .prod-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .page-hero__title { font-size: clamp(2.5rem, 12vw, 3.5rem); }
}

/* ── Badge "Lo nuevo" ─────────────────────────────────────── */
.badge-new {
  display:        inline-block;
  font-family:    var(--f-mono);
  font-size:      0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--c-white);
  background:     var(--c-red);
  padding:        0.25em 0.6em;
  border-radius:  2px;
  margin-bottom:  0.3rem;
  align-self:     flex-start;
}

/* ── Variantes de precio ──────────────────────────────────── */
.price-variants {
  display:   flex;
  gap:       6px;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.price-variant {
  font-family:    var(--f-mono);
  font-size:      0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--c-text-muted);
  padding:        0.3em 0.75em;
  border:         1px solid var(--c-line);
  border-radius:  var(--radius);
  background:     transparent;
  cursor:         pointer;
  transition:
    color        var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    background   var(--dur) var(--ease);
}
.price-variant:hover {
  color:        var(--c-white);
  border-color: var(--c-line-strong);
}
.price-variant--active {
  color:        var(--c-white);
  border-color: var(--c-red);
  background:   rgba(225,30,38,0.1);
}

/* ── Lightbox ─────────────────────────────────────────────── */
.lightbox {
  position:        fixed;
  inset:           0;
  z-index:         9000;
  background:      rgba(0,0,0,0.92);
  display:         flex;
  align-items:     center;
  justify-content: center;
  backdrop-filter: blur(8px);
}
.lightbox[hidden] { display: none; }

.lightbox__img-wrap {
  max-width:  90vw;
  max-height: 85vh;
  display:    flex;
  align-items: center;
  justify-content: center;
}
.lightbox__img {
  max-width:   90vw;
  max-height:  85vh;
  object-fit:  contain;
  border:      1px solid var(--c-line);
  user-select: none;
}
.lightbox__close {
  position:   absolute;
  top:        1.25rem;
  right:      1.25rem;
  background: rgba(0,0,0,0.6);
  border:     1px solid var(--c-line);
  color:      var(--c-white);
  font-size:  1.2rem;
  line-height: 1;
  padding:    0.3em 0.6em;
  cursor:     pointer;
  z-index:    10;
  transition: background var(--dur) var(--ease);
}
.lightbox__close:hover { background: rgba(225,30,38,0.7); }

.lightbox__nav {
  position:   absolute;
  top:        50%;
  transform:  translateY(-50%);
  background: rgba(0,0,0,0.55);
  border:     1px solid var(--c-line);
  color:      var(--c-white);
  font-size:  2.5rem;
  line-height: 1;
  padding:    0.1em 0.4em 0.15em;
  cursor:     pointer;
  z-index:    10;
  transition: background var(--dur) var(--ease);
}
.lightbox__nav:hover { background: rgba(225,30,38,0.7); }
.lightbox__nav--prev { left:  1rem; }
.lightbox__nav--next { right: 1rem; }

.lightbox__dots {
  position:  absolute;
  bottom:    1.25rem;
  left:      50%;
  transform: translateX(-50%);
  display:   flex;
  gap:       8px;
  z-index:   10;
}
.lightbox__dot {
  width:         9px;
  height:        9px;
  border-radius: 50%;
  background:    rgba(255,255,255,0.3);
  border:        none;
  cursor:        pointer;
  padding:       0;
  transition:    background var(--dur) var(--ease);
}
.lightbox__dot--active { background: var(--c-red); }

.lightbox__counter {
  position:    absolute;
  top:         1.25rem;
  left:        50%;
  transform:   translateX(-50%);
  background:  rgba(0,0,0,0.55);
  border:      1px solid var(--c-line);
  color:       var(--c-white);
  font-family: var(--f-mono);
  font-size:   0.8rem;
  letter-spacing: 0.08em;
  padding:     0.25em 0.75em;
  z-index:     10;
  pointer-events: none;
  white-space: nowrap;
}