/* ==========================================================================
   TRUST SLIDER - BARRA DESLIZANTE DE CONFIANZA
   Barra compacta con mensajes deslizantes automáticos
   Para todas las páginas de productos
   ========================================================================== */

/* Ocultar el banner antiguo de confianza cuando existe el slider */
.trust-banner {
  display: none !important;
}

/* ==========================================================================
   CONTENEDOR PRINCIPAL DEL SLIDER
   ========================================================================== */
.trust-slider {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #0ea5e9 100%);
  color: white;
  overflow: hidden;
  position: relative;
  padding: 0;
  margin-bottom: 1rem;
  box-shadow: 0 2px 10px rgba(30, 64, 175, 0.3);
}

/* Contenedor del track que se desliza */
.trust-slider-track {
  display: flex;
  animation: slideTrack 25s linear infinite;
  width: fit-content;
}

/* Pausar animación al hover */
.trust-slider:hover .trust-slider-track {
  animation-play-state: paused;
}

/* Animación de deslizamiento infinito */
@keyframes slideTrack {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   ITEMS INDIVIDUALES DEL SLIDER
   ========================================================================== */
.trust-slider-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 500;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
}

.trust-slider-item:last-child {
  border-right: none;
}

/* Iconos */
.trust-slider-item i {
  font-size: 1rem;
  color: #fcd34d;
  flex-shrink: 0;
}

/* Texto del item */
.trust-slider-item span {
  color: white;
}

.trust-slider-item strong {
  color: #fcd34d;
  font-weight: 700;
}

/* ==========================================================================
   VARIANTES DE ICONOS POR TIPO
   ========================================================================== */
.trust-slider-item.security i { color: #4ade80; }
.trust-slider-item.payment i { color: #fbbf24; }
.trust-slider-item.delivery i { color: #38bdf8; }
.trust-slider-item.guarantee i { color: #a78bfa; }
.trust-slider-item.shipping i { color: #f472b6; }
.trust-slider-item.cash i { color: #34d399; }

/* ==========================================================================
   DECORACIÓN Y BORDES SUAVES
   ========================================================================== */
.trust-slider::before,
.trust-slider::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  z-index: 2;
  pointer-events: none;
}

.trust-slider::before {
  left: 0;
  background: linear-gradient(to right, #1e40af, transparent);
}

.trust-slider::after {
  right: 0;
  background: linear-gradient(to left, #0ea5e9, transparent);
}

/* ==========================================================================
   RESPONSIVE - MÓVILES
   ========================================================================== */
@media (max-width: 768px) {
  .trust-slider-item {
    padding: 8px 16px;
    font-size: 0.75rem;
    gap: 6px;
  }

  .trust-slider-item i {
    font-size: 0.9rem;
  }

  .trust-slider-track {
    animation-duration: 20s;
  }
}

@media (max-width: 480px) {
  .trust-slider-item {
    padding: 7px 12px;
    font-size: 0.7rem;
    gap: 5px;
  }

  .trust-slider-item i {
    font-size: 0.8rem;
  }

  .trust-slider-track {
    animation-duration: 18s;
  }

  .trust-slider::before,
  .trust-slider::after {
    width: 20px;
  }
}

/* ==========================================================================
   EFECTO HOVER EN ITEMS
   ========================================================================== */
.trust-slider-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   MODO OSCURO (si aplica)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  .trust-slider {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0c4a6e 100%);
  }
}