/* =========================================================================
   MÓDULO DE PATROCINADOS / SUGERIDOS (directory-sponsored.css)
   ========================================================================= */

/* Contenedor Principal (Viewport del Slider) */
#sponsored-suggestions-container {
  position: relative;
  width: 100%;
  min-height: 60px;
  /* PROHIBIDO: Usar overflow: hidden aquí para no matar la inercia en iOS */
  padding: 10px 0;
  margin-top: 10px;
  margin-bottom: 5px;

  /* Efecto de Desvanecimiento Lateral (Fade Edges) */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 4%,
    black 93%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 4%,
    black 93%,
    transparent 100%
  );
}

/* Wrapper interno deslizable (Motor Nativo 100%) */
#mox-slider-wrapper {
  display: flex !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch; /* Fluidez total */
  gap: 0; /* Para que el pegado entre tarjetas sea perfecto como en la rama original */
  padding: 0;
  /* Ocultar barra de scroll (Estética Invisible) */
  -ms-overflow-style: none;  /* IE/Edge */
  scrollbar-width: none;     /* Firefox */
}
#mox-slider-wrapper::-webkit-scrollbar {
  display: none;             /* Chrome/Safari */
}

/* Tarjeta / Pill Patrocinada (Fondo Sólido GPU-Safe v7.2.2) */
.pill-sponsored {
  flex: 0 0 100% !important; /* Tarjeta completa en el viewport */
  width: 100%;
  scroll-snap-align: center; /* La tarjeta se centra sola al soltar el dedo */
  will-change: scroll-position; /* Activa la GPU del iPhone */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0,0,0); /* Forzado de hardware */
  padding: 0; /* Elimina paddings que achiquen la tarjeta */
  
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 16px;
  cursor: pointer;
  
  /* Fondo Sólido Alfa (Sin backdrop-filter — GPU-Safe para Safari) */
  background: rgba(20, 20, 20, 0.88);
  border-top: 1px solid rgba(255, 255, 255, 0.15); /* Reflexión principal */
  border-bottom: 1px solid rgba(0, 0, 0, 0.5); /* Sombra base */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  
  transition: background 0.2s ease, transform 0.2s ease;
}

.pill-sponsored:active {
  transform: scale(0.98);
  background: rgba(30, 30, 30, 0.85);
  transition: transform 0.15s ease, background 0.15s ease;
}

/* Cabecera de la Tarjeta */
.pill-sponsored-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Micro-Tag Discreto Gold / Premium (v7.2.1 WCAG Contrast) */
.mox-micro-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  /* Contraste Black-on-Gold */
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
  color: #111111 !important;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

.badge-premium {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  /* Premium usa un tono plateado platinium con texto oscuro */
  background: linear-gradient(135deg, #E0E0E0 0%, #9E9E9E 100%);
  color: #111111;
  box-shadow: 0 2px 8px rgba(158, 158, 158, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Título e Info del ROI */
.pill-sponsored-body {
  margin-top: 2px;
}

.pill-sponsored-title {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}

.pill-sponsored-desc {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8rem;
  font-weight: 400;
  margin: 3px 0 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}