/* =========================================================
   ⚠️ IMPORTANTE
   ESTE ARCHIVO NO DEBE ROMPER EL STYLE.CSS (HOME)
   SOLO COMPLEMENTA
   ========================================================= */

/* ================= GRID ================= */
.grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
}

/* ================= HEADER ================= */
.header{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

/* BOTÓN VOLVER */
.volver{
  position:absolute;
  left:20px;
  text-decoration:none;
  color:white;
  background:#141a2a;
  padding:8px 15px;
  border-radius:8px;
  transition:0.3s;
}

.volver:hover{
  background:#00aaff;
}

/* =========================================================
   🔥 CORRECCIÓN CLAVE (IGUALAR CARDS AL HOME)
   ========================================================= */

.card img{
  height:420px !important;
  object-fit:cover;
  object-position:center 30%;
}

.card.large img{
  height:460px !important;
}

/* =========================================================
   📢 BANNER
   ========================================================= */
.banner{
  width:100%;
  overflow:hidden;
  background:#0f172a;
  border-bottom:1px solid rgba(255,255,255,0.05);
}

.banner-track-licencias{
  display:flex;
  width:max-content;
  gap:50px;
  animation:scrollInfinito 150s linear infinite;
  padding:12px 0;
}

.banner:hover .banner-track{
  animation-play-state:paused;
}

.banner-item{
  color:#00ffcc;
  font-size:14px;
  white-space:nowrap;
  font-weight:600;
  letter-spacing:.02em;
}

.banner-item.agotado{ color:#ff4d4d; }
.banner-item.sin-stock{ color:#ff6b6b; }
.banner-item.poco{ color:#ffaa00; }
.banner-item.combo{ color:#00aaff; }
.banner-item.popular{ color:#ffd54a; }
.banner-item.vendido{ color:#ff8a00; }
.banner-item.disponible{ color:#00ffcc; }
.banner-item.promo{ color:#ff66cc; }
.banner-item.nuevo{ color:#7cf5ff; }

@keyframes scrollInfinito{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-50%); }
}

/* ================= RESPONSIVE ================= */
@media(max-width:1000px){
  .grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:600px){

  .header{
    flex-direction:column;
    align-items:flex-start;
    gap:5px;
  }

  .volver{
    position:relative;
    left:0;
    margin-top:5px;
    margin-left:20px;
  }

  .logo{
    margin:20px 0 5px 0;
  }

}

@media(max-width:600px){

  .logo{
    margin-left:20px;
  }

}

/*---------------------------ULTIMA UNIDADES --------------*/
.ultimas{
  color:#ffaa00;
  font-size:12px;
  margin-top:5px;
  font-weight:600;
}

/* =========================================
   💻 EFECTO LICENCIAS (PREMIUM TECH)
   ========================================= */

.grid .card{
  position:relative;
  transition:0.4s;
}

.grid .card::before,
.grid .card::after{
  pointer-events: none;
}

.grid .card:hover{
  transform:translateY(-6px);
  box-shadow:0 0 25px rgba(0,255,200,0.15);
}

.grid .card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  padding:1px;
  background:linear-gradient(120deg,#00ffe0,#00aaff,#00ffe0);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:0;
  transition:0.4s;
}

.grid .card:hover::after{
  opacity:1;
}

.grid .card::before{
  content:"";
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(
    circle,
    rgba(0,255,200,0.12) 0%,
    transparent 60%
  );
  opacity:0;
  transition:0.5s;
}

.grid .card:hover::before{
  opacity:1;
}

.licencia-badge{
  position:absolute;
  top:10px;
  left:10px;
  background:linear-gradient(45deg,#00aaff,#00ffe0);
  color:#001f2f;
  padding:5px 10px;
  border-radius:8px;
  font-size:11px;
  font-weight:bold;
  z-index:2;
  box-shadow:0 0 10px rgba(0,255,200,0.5);
}

.encabezado-seccion{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:30px;
}

#licencias{
  margin-top:15px;
}

@media(max-width:600px){

  .encabezado-seccion{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .acciones{
    width:100%;
  }

}

/* =========================================================
   🛒 BOTONES LICENCIAS (AGREGADO)
   ========================================================= */
/* =========================================================
   🛒 BOTONES LICENCIAS (UPGRADE PRO)
   ========================================================= */

.acciones-card{
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  margin-top:auto;
}

/* BOTÓN COMPRAR */
.btn-comprar{
  flex:1;
  position:relative;
  background:linear-gradient(135deg,#0251fd,#00aaff);
  padding:12px 18px;
  border-radius:12px;
  text-decoration:none;
  color:white;
  font-size:14px;
  font-weight:600;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  transition:all 0.3s ease;
  box-shadow:0 8px 20px rgba(0, 85, 255, 0.25);
}

/* EFECTO BRILLO */
.btn-comprar::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.4),
    transparent
  );
  transition:0.5s;
}

.btn-comprar:hover::before{
  left:100%;
}

/* HOVER */
.btn-comprar:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 15px 35px rgba(0, 170, 255, 0.4);
}

/* CLICK */
.btn-comprar:active{
  transform:scale(0.96);
}

/* BOTÓN INFO */
.btn-info{
  background:#111827;
  border:none;
  width:44px;
  height:44px;
  border-radius:12px;
  color:#e5e7eb;
  cursor:pointer;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.25s ease;
  border:1px solid rgba(255,255,255,0.05);
}

/* HOVER INFO */
.btn-info:hover{
  background:#1f2937;
  transform:scale(1.08);
  box-shadow:0 0 15px rgba(0,255,200,0.2);
}

/* BOTÓN DESHABILITADO */
.btn-comprar.disabled{
  background:linear-gradient(135deg,#374151,#4b5563);
  cursor:not-allowed;
  opacity:0.6;
  box-shadow:none;
}

.btn-comprar.disabled:hover{
  transform:none;
}

/* RESPONSIVE */
@media(max-width:600px){

  .acciones-card{
    gap:8px;
  }

  .btn-comprar{
    font-size:13px;
    padding:11px 14px;
  }

  .btn-info{
    width:40px;
    height:40px;
    font-size:15px;
  }

}

/* =========================================================
   🧩 FOOTER GLOBAL (MISMO QUE HOME - TODAS LAS SECCIONES)
   ========================================================= */

.footer{
  width:100%;
  background:#020617;
  color:white;
  margin-top:40px;
}

.footer-bar{
  max-width:1200px;
  margin:auto;
  padding:25px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}

.footer-logo{
  font-size:20px;
  font-weight:700;
}

.footer-logo span{
  color:#0251fd;
}

.footer-desc{
  font-size:13px;
  color:#9ca3af;
  margin-top:4px;
}

.footer-center{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.footer-center a{
  color:#e5e7eb;
  text-decoration:none;
  font-size:14px;
  transition:0.2s;
}

.footer-center a:hover{
  color:#0251fd;
}

.footer-right{
  font-size:14px;
  color:#e5e7eb;
}

.footer-bottom{
  text-align:center;
  padding:12px 10px;
  font-size:12px;
  background:#01030a;
  color:#9ca3af;
}

@media(max-width:600px){

  .footer-bar{
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
  }

  .footer-center{
    width:100%;
  }

  .footer-right{
    font-size:13px;
    word-break:break-word;
  }

}
.footer-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:15px;
}

.footer-left,
.footer-center,
.footer-right{
  display:flex;
  align-items:center;
}

.footer-center{
  gap:15px;
  flex-wrap:wrap;
}

.footer-center a{
  text-decoration:none;
}

@media(max-width:600px){

  .footer-bar{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }

  .footer-center{
    width:100%;
    justify-content:flex-start;
  }

  .footer-right{
    font-size:13px;
    word-break:break-word;
  }

}

.descripcion{
  white-space: pre-line; /* 🔥 RESPETA SALTOS DE LÍNEA */
  line-height:1.6;
  font-size:14px;
  color:#e5e7eb;
}

/* ===== MODAL INFO IGUAL A CUENTAS ===== */