/* =========================
   NAVBAR (barra superior)
========================= */
.navbar-custom {
  background: #000000;     /* Fondo del menú */
  padding: 16px;           /* Espacio interno */
}

.nav-container {
  display: flex;           /* Logo a la izquierda, menú a la derecha */
  justify-content: space-between;
  align-items: center;
}

/* LOGO DE LA EMPRESA */
.logo-img {
  width: 48px;             /* 🔹 TAMAÑO DEL LOGO (PC) */
  height: auto;            /* Mantiene proporción */
  object-fit: contain;
}

/* =========================
   CARRUSEL / BANNER
========================= */

/* CONTENEDOR DEL BANNER */
.banner-carousel {
  width: 100%;
  height: 800PX;           /* 🔹 ALTURA DEL BANNER EN PC */
  overflow: hidden;        /* Evita que la imagen se salga */
  position: relative;
}

/* ESTRUCTURA DEL CARRUSEL (Bootstrap) */
.banner-carousel .carousel,
.banner-carousel .carousel-inner,
.banner-carousel .carousel-item {
  height: 100%;
}

/* IMÁGENES DEL CARRUSEL */
.banner-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 🔹 RECORTA sin deformar */
}

/* =========================
   SECCIONES GENERALES
========================= */
.section {
  padding: 24px;           /* Espaciado entre bloques */
}

.section-title {
  text-align: center;
  margin-bottom: 16px;
}

/* =========================
   TIENDAS ACTIVAS (Recycler horizontal)
========================= */
.recycler-horizontal {
  display: flex;
  gap: 16px;
  overflow-x: auto;        /* Scroll horizontal */
}

.store-card {
  min-width: 220px;        /* Ancho de cada tarjeta */
  background: black;
  color: white;
  padding: 16px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* LOGOS DE TIENDAS */
.logos-only {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  padding: 12px 4px;
  justify-content: center;   /* 👈 centra cuando hay pocos */
}

.logo-item {
  flex: 0 0 auto;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0.9;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hover elegante */
.logo-item img:hover {
  transform: scale(1.08);
  opacity: 1;
}

/* =========================
   RANKINGS
========================= */
.ranking-list {
  display: flex;
  gap: 16px;
}

.ranking-card {
  flex: 1;
  height: 140px;           /* Altura de cada ranking */
  background: black;
  border-radius: var(--radius);
}


/* =========================
   MENÚ DE NAVEGACIÓN
========================= */
.nav-links {
  display: flex;
  gap: 16px;                 /* separación entre links */
}

/* LINKS DEL MENÚ */
.nav-links a {
  padding: 6px 14px;         /* área clicable (MUY IMPORTANTE) */
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;            /* texto blanco */
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

/* HOVER */
.nav-links a:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* LINK ACTIVO */
.nav-links a.active {
  background: rgb(248, 247, 247);
  color: #000000;            /* resalta el activo */
}