.badge-popular {
  position: absolute;
  top: 15px;
  right: -10px;
  background-image: linear-gradient(90deg, #e36e0f, #a4410c);
  color: white;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 5px 15px;
  border-radius: 3px;
  transform: rotate(10deg);
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
}

.item-inner {
  position: relative;
  /* Necesario para que el span se ubique dentro */
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 10px;
}

/* VIDEO */
.video-container {
  width: 100%;
  /* Asegura que el contenedor ocupe todo el ancho */
  max-width: 500px;
  /* Mantiene un límite en pantallas grandes */
  margin: 0 auto;
  /* Centra el contenedor */
  position: relative;
  aspect-ratio: 16 / 9;
  /* Mantiene la proporción */
}

.video-container iframe {
  width: 100%;
  /* Hace que el iframe ocupe todo el contenedor */
  height: 100%;
  /* Ajusta la altura en base al contenedor */
  position: absolute;
  top: 0;
  left: 0;
}

.cliente-logo {
  width: 90px;
  border-radius: 50px;
}

/* ==== ESTILO GENERAL DE LAS CARDS ==== */
#comp .card {
  border: none;
  border-radius: 18px;
  transition: all 0.28s ease-in-out;
  padding: 25px 10px !important;
  cursor: pointer;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* transiciones icono */
#comp .card i {
  transition: color 0.28s ease, transform 0.28s ease;
}

/* ---- Definir colores por columna usando variables ----
   IMPORTANT: apunta al contenedor real de tus columnas:
   #comp .row.justify-content-center.mt-4 > .col-6:nth-of-type(N)
*/
#comp .row.justify-content-center.mt-4 > .col-6:nth-of-type(1) {
  --accent: #ff7b00;
  --accent-rgb: 255, 123, 0;
}

#comp .row.justify-content-center.mt-4 > .col-6:nth-of-type(2) {
  --accent: #00a8ff;
  --accent-rgb: 0, 168, 255;
}

#comp .row.justify-content-center.mt-4 > .col-6:nth-of-type(3) {
  --accent: #9c27b0;
  --accent-rgb: 156, 39, 176;
}

#comp .row.justify-content-center.mt-4 > .col-6:nth-of-type(4) {
  --accent: #2ecc71;
  --accent-rgb: 46, 204, 113;
}

#comp .row.justify-content-center.mt-4 > .col-6:nth-of-type(5) {
  --accent: #e84393;
  --accent-rgb: 232, 67, 147;
}

#comp .row.justify-content-center.mt-4 > .col-6:nth-of-type(6) {
  --accent: #40739e;
  --accent-rgb: 64, 115, 158;
}

#comp .row.justify-content-center.mt-4 > .col-6:nth-of-type(7) {
  --accent: #e67e22;
  --accent-rgb: 230, 126, 34;
}

#comp .row.justify-content-center.mt-4 > .col-6:nth-of-type(8) {
  --accent: #1abc9c;
  --accent-rgb: 26, 188, 156;
}

/* Aplicar el color del --accent al icono (si no hay variable, color por defecto) */
#comp .row.justify-content-center.mt-4 .card i {
  color: var(--accent, #ff7b00);
}

/* HOVER general (subida + escala) */
#comp .card:hover {
  transform: translateY(-8px) scale(1.03);
}

/* Icono en hover */
#comp .card:hover i {
  transform: scale(1.2) rotate(5deg);
}

/* Sombra de color dinámica usando la variable RGB */
#comp .row.justify-content-center.mt-4 > .col-6 .card:hover {
  /* negro tenue general base + color del acento como sombra difusa */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12),
    0 10px 30px rgba(var(--accent-rgb, 255, 123, 0), 0.2);
}

/* Título */
#comp .card h6 {
  font-weight: 600;
  margin-top: 5px;
  color: #222;
}

/* Ajustes opcionales: icono dentro de un "badge" circular (si quieres) */
#comp .card .fa-stack,
#comp .card i {
  display: inline-block;
  line-height: 1;
}

/* si usas un icono muy grande que sobresale, lo centramos */
#comp .card i.fa-2x {
  font-size: 1.6rem;
}

/* pequeña mejora responsive */
@media (max-width: 576px) {
  #comp .card {
    padding: 18px 8px !important;
  }

  #comp .card i.fa-2x {
    font-size: 1.5rem;
  }
}