/* spbi-fortnite.css - estilo Fortnite separado (animación exclusiva en imágenes) */
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');

.spbi-style-fortnite {
  background: linear-gradient(180deg, rgba(12,15,27,0.7), rgba(6,8,16,0.9));
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  color: #e6f6ff;
  overflow: visible;
  position: relative;
  font-family: 'Luckiest Guy', "Helvetica Neue", Arial, sans-serif;
}

/* Neon decor */
.spbi-style-fortnite:before,
.spbi-style-fortnite:after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 6px;
  opacity: 0.14;
}
.spbi-style-fortnite:before {
  top: -8px;
  left: -8px;
  right: -8px;
  height: 6px;
  background: linear-gradient(90deg,#00f0ff,#7b55ff);
  filter: blur(10px);
}
.spbi-style-fortnite:after {
  bottom: -8px;
  left: -8px;
  right: -8px;
  height: 6px;
  background: linear-gradient(90deg,#ff67c7,#ffa700);
  filter: blur(10px);
}

/* IMAGEN: ancho aumentado para evitar corte (desktop) */
.spbi-style-fortnite .spbi-images {
  flex: 0 0 320px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Caja de imagen: mantiene altura pero permite más anchura visible */
.spbi-style-fortnite .spbi-image-wrap {
  border-radius: 10px;
  height: 420px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.6), 0 0 28px rgba(59,130,246,0.08);
  border: 1px solid rgba(255,255,255,0.04);
  overflow: hidden;
  position: relative;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;

  /* ANIMACIÓN: entrada sutil de la caja de imagen (solo la caja) */
  animation: spbi-image-wrap-in 480ms cubic-bezier(.2,.9,.3,1) both;
  will-change: transform, opacity;
}

/* Entrada de la caja de imagen */
@keyframes spbi-image-wrap-in {
  from { opacity: 0; transform: translateY(8px) scale(.998); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Ajuste de imagen para evitar cortes: mostrar enteras cuando sea posible */
.spbi-style-fortnite .spbi-image-wrap img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  display: block;

  /* ANIMACIÓN: ligera entrada + transición suave para hover (solo la imagen) */
  transition: transform .6s cubic-bezier(.2,.9,.3,1), filter .45s ease;
  transform-origin: center;
  will-change: transform, filter;
}

/* Hover: efecto de escalado suave en la imagen (no afecta precio, cantidad, ni botón) */
.spbi-style-fortnite .spbi-image-wrap:hover img,
.spbi-style-fortnite .spbi-image-wrap:focus-within img {
  transform: scale(1.03) translateY(-4px);
  filter: saturate(1.04) contrast(1.02);
}

/* Shine layer on image container (visual only, does not change image layout) */
.spbi-style-fortnite .spbi-image-wrap::after {
  content: '';
  position: absolute;
  top: -40%;
  left: -30%;
  width: 30%;
  height: 200%;
  background: linear-gradient(90deg, rgba(255,255,255,0.0), rgba(255,255,255,0.14), rgba(255,255,255,0.0));
  transform: rotate(18deg) translateX(-120%);
  transition: transform .9s cubic-bezier(.2,.9,.3,1), opacity .6s ease;
  pointer-events: none;
  will-change: transform, opacity;
  opacity: 0.0; /* por defecto invisible para evitar impactos en layout */
}

/* Activar brillo solo en hover de la caja de imagen */
.spbi-style-fortnite .spbi-image-wrap:hover::after,
.spbi-style-fortnite .spbi-image-wrap:focus-within::after {
  transform: rotate(18deg) translateX(220%);
  opacity: 1;
}

/* Overlay suave (sin animaciones que afecten otros elementos) */
.spbi-style-fortnite .spbi-image-wrap:before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,10,30,0.0), rgba(6,10,30,0.28));
  pointer-events: none;
}

/* INFO panel */
.spbi-style-fortnite .spbi-info {
  padding: 8px 6px 6px 6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.02);
}

/* Título: Luckiest Guy con contorno negro fino y mayor tamaño */
.spbi-style-fortnite .spbi-title {
  font-family: 'Luckiest Guy', "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 1.05;
  color: #ffffff;
  -webkit-text-stroke: 0.6px #000;
  text-stroke: 0.6px #000;
  text-shadow: 0 0 0 rgba(0,0,0,0);
  letter-spacing: 0.6px;
  margin-bottom: 6px;
  text-align: left;
}

/* Precio (sin animaciones) */
.spbi-style-fortnite .spbi-price {
  display: inline-block;
  background: linear-gradient(90deg,#0ee6ff,#7b55ff);
  color: #041023;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 900;
  margin-bottom: 12px;
}

/* Descripción */
.spbi-style-fortnite .spbi-desc {
  color: #cfeeff;
  opacity: 0.95;
  font-size: 0.98rem;
  line-height: 1.35;
}

/* CONTROLES: etiqueta "Cantidad" en negro y input con número negro (sin animaciones) */
.spbi-style-fortnite .spbi-qty-label {
  color: #FFFFFF;
  font-weight: 700;
  font-family: 'Luckiest Guy', "Helvetica Neue", Arial, sans-serif;
}

.spbi-style-fortnite .spbi-controls {
  gap: 12px;
  align-items: center;
  margin-top: 10px;
  justify-content: flex-start;
}

.spbi-style-fortnite .spbi-qty {
  background: #ffffff;
  color: #000000;
  border: 1px solid #cfcfcf;
  box-shadow: none;
  padding: 6px 8px;
  border-radius: 4px;
  width: 76px;
  font-size: 1rem;
  font-weight: 700;
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Quitar spin buttons en WebKit */
.spbi-style-fortnite .spbi-qty::-webkit-outer-spin-button,
.spbi-style-fortnite .spbi-qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Botón estilo Fortnite (sin animaciones extra) */
.spbi-style-fortnite .spbi-add-to-cart.button {
  background: linear-gradient(180deg,#ff7bd4,#ff5a00);
  color: #041023;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  box-shadow: 0 10px 30px rgba(255,90,0,0.14);
  transition: transform .12s ease, box-shadow .12s ease;
}
.spbi-style-fortnite .spbi-add-to-cart.button:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(255,90,0,0.18);
}

/* Asegura que badges estén ocultos */
.spbi-style-fortnite .spbi-badge,
.spbi-style-fortnite .spbi-stock { display: none !important; }

/* Responsive: ajustes para tablet y móvil */
@media (max-width: 1200px) {
  .spbi-style-fortnite .spbi-images { flex: 0 0 280px; min-width: 220px; }
  .spbi-style-fortnite .spbi-image-wrap { height: 400px; }
  .spbi-style-fortnite .spbi-image-wrap img { object-fit: cover; width: 100%; height: 100%; }
}

@media (max-width: 900px) {
  .spbi-style-fortnite .spbi-images { flex: 0 0 220px; min-width: 180px; }
  .spbi-style-fortnite .spbi-image-wrap { height: 340px; }
  .spbi-style-fortnite .spbi-image-wrap img { object-fit: cover; width: 100%; height: 100%; }
}

@media (max-width: 600px) {
  .spbi-style-fortnite { padding: 10px; }
  .spbi-style-fortnite .spbi-container { flex-direction: column; }
  .spbi-style-fortnite .spbi-images { flex: 0 0 auto; width: 100%; min-width: 100%; }
  .spbi-style-fortnite .spbi-image-wrap { width: 100%; height: 320px; }
  .spbi-style-fortnite .spbi-image-wrap img { object-fit: cover; width: 100%; height: 100%; }
}