/* ---------- Importar fuente estilo graffiti ---------- */
@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');

/* ---------- Variables Subway ---------- */
:root{
  --subway-green: #009739;
  --subway-yellow: #ffd100;
  --subway-red: #ee1c25;
  --subway-black: #111111;
  --subway-gray: #f2f2f2;
  --subway-white: #ffffff;
  --subway-font: 'Bangers', cursive;
}

/* ---------- Contenedor principal ---------- */
.sliderarcade-design-subway .sliderarcade-container{
  background: linear-gradient(180deg, var(--subway-gray) 0%, #fff 100%);
  border: 4px solid var(--subway-green);
  border-radius: 18px;
  max-width: 1400px;
  margin: 0 auto 110px;
  padding: 26px 26px 130px;
  position: relative;
  overflow: visible;
  box-shadow: 0 6px 22px rgba(0,0,0,0.35);
  animation: containerFade 1s ease forwards;
}
@keyframes containerFade {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Tarjeta de producto ---------- */
.sliderarcade-design-subway .sliderarcade-product{
  background: var(--subway-white);
  border: 3px solid var(--subway-yellow);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  animation: cardPop 0.6s ease;
}
@keyframes cardPop {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.sliderarcade-design-subway .sliderarcade-product:hover{
  transform: translateY(-8px) scale(1.05) rotate(-1deg);
  box-shadow: 0 14px 30px rgba(0,0,0,0.3);
  animation: cardShake 0.4s ease;
}
@keyframes cardShake {
  0% { transform: translateY(-8px) rotate(-1deg); }
  25% { transform: translateY(-6px) rotate(1deg); }
  50% { transform: translateY(-8px) rotate(-1deg); }
  75% { transform: translateY(-6px) rotate(1deg); }
  100% { transform: translateY(-8px) rotate(-1deg); }
}

/* ---------- Imagen ---------- */
.sliderarcade-design-subway .sliderarcade-product-img{
  width: 100%;
  max-height: 288px;
  object-fit: contain;
  margin: 0 auto 12px;
  border-radius: 10px;
  border: 2px solid var(--subway-green);
  background: #fff;
  transition: transform 0.4s ease;
}
.sliderarcade-design-subway .sliderarcade-product:hover .sliderarcade-product-img{
  transform: scale(1.08) rotate(-2deg);
}

/* ---------- Texto ---------- */
.sliderarcade-design-subway .sliderarcade-product-title{
  font-family: var(--subway-font);
  font-weight: 900;
  color: var(--subway-green);
  margin: 6px 0 6px;
  font-size: 1.6rem;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 var(--subway-yellow), -2px -2px 0 var(--subway-red);
  animation: titlePulse 2s infinite;
}
@keyframes titlePulse {
  0%,100% { transform: scale(1); text-shadow: 2px 2px 0 var(--subway-yellow), -2px -2px 0 var(--subway-red); }
  50% { transform: scale(1.08); text-shadow: 0 0 12px var(--subway-green), 0 0 20px var(--subway-yellow); }
}

.sliderarcade-design-subway .sliderarcade-product-description{
  color: var(--subway-black);
  font-size: 1.05rem;
  margin: 6px 0 10px;
  line-height: 1.35;
  min-height: 2.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Arial', sans-serif;
  animation: fadeInUp 1s ease;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.sliderarcade-design-subway .sliderarcade-product-price{
  color: var(--subway-red);
  font-size: 1.6rem;
  font-weight: 900;
  margin-bottom: 12px;
  text-shadow: 1px 1px 0 var(--subway-yellow);
  animation: priceBlink 1.5s infinite;
}
@keyframes priceBlink {
  0%,100% { color: var(--subway-red); }
  50% { color: var(--subway-yellow); }
}

/* ---------- Botón ---------- */
.sliderarcade-design-subway .sliderarcade-add-to-cart{
  background: var(--subway-yellow);
  border: 3px solid var(--subway-green);
  color: var(--subway-black);
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 900;
  text-transform: uppercase;
  transition: 0.25s ease;
  min-width: 190px;
  box-shadow: 0 3px 0 var(--subway-red);
  font-family: var(--subway-font);
  animation: buttonBounce 2.5s infinite;
}
@keyframes buttonBounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.sliderarcade-design-subway .sliderarcade-add-to-cart:hover{
  background: var(--subway-green);
  color: #fff;
  box-shadow: 0 3px 0 var(--subway-yellow), 0 0 12px var(--subway-green);
  transform: scale(1.05);
}

/* ---------- Dots ---------- */
.sliderarcade-design-subway .slick-dots button::before{
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at center, var(--subway-green) 0%, var(--subway-yellow) 100%);
  border: 1px solid var(--subway-black);
  animation: dotPulse 2s infinite;
}
@keyframes dotPulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

/* ---------- Flechas ---------- */
.sliderarcade-design-subway .slick-arrow{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 48px; height: 48px; border-radius: 50%; background: var(--subway-green);
  border: 3px solid var(--subway-yellow); cursor: pointer; transition: 0.18s ease;
  animation: arrowGlow 2s infinite;
}
@keyframes arrowGlow {
  0%,100% { box-shadow: 0 0 6px var(--subway-green); }
  50% { box-shadow: 0 0 16px var(--subway-yellow); }
}
.sliderarcade-design-subway .slick-arrow:hover{ background: var(--subway-red); border-color: #fff; transform: scale(1.1); }
.sliderarcade-design-subway .slick-prev{ left: -32px; }
.sliderarcade-design-subway .slick-next{ right: -32px; }
.sliderarcade-design-subway .slick-arrow::before{
  font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 22px; color: #fff;
}
.sliderarcade-design-subway .slick-prev::before{ content: "\f104"; }
.sliderarcade-design-subway .slick-next::before{ content: "\f105"; }