/* ============================= */
/* SCROLL PROMOS */
/* ============================= */

.promos-scroll{
    display:flex;
    overflow-x:auto;
    gap:16px;
    padding:10px 16px;

    scroll-snap-type:x mandatory;
    scroll-padding-left:16px;
    scroll-padding-right:16px;

    -webkit-overflow-scrolling:touch;
}

.promos-scroll::-webkit-scrollbar{
    display:none;
}

.promos-scroll:has(.promo-card:only-child){
    justify-content:center;
    overflow-x:hidden;
}

/* ============================= */
/* TARJETA PROMO */
/* ============================= */

.promo-card{
    flex:0 0 90%;
    max-width:90%;

    background:#fff;
    border-radius:14px;
    padding:14px;

    box-shadow:0 4px 12px rgba(0,0,0,0.08);

    display:flex;
    gap:14px;
    align-items:center;

    scroll-snap-align:center;

    transition:transform .2s ease, box-shadow .2s ease;
}

.promo-card:hover{
    transform:translateY(-3px);
    box-shadow:0 6px 18px rgba(0,0,0,0.12);
}

/* ============================= */
/* COLUMNA IZQUIERDA */
/* ============================= */

.promo-img{
    position:relative;
    width:120px;
    height:120px;
    flex-shrink:0;
}

/* ============================= */
/* IMAGEN */
/* ============================= */

.promo-img img{
    width:100%;
    height:100%;
    object-fit:cover;

    border-radius:10px;
    display:block;

    background:#f2f2f2;
}

/* ============================= */
/* RIBBON */
/* ============================= */

.promo-ribbon {
  position: absolute;
  top: -16px;
  left: -12px;

  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;

  color: #fff;
  border-radius: 6px;

  transform: rotate(-18deg); /* 🔥 inclinación */
  transform-origin: left center;

  box-shadow: 0 4px 10px rgba(0,0,0,0.25);

  z-index: 3;
}

.promo-ribbon {
  border: 2px solid rgba(255,255,255,0.2);
}

.promo-ribbon {
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* TIPOS */
.ribbon-combo {background: linear-gradient(135deg, #00b894, #00cec9); }/* verde agua */
.ribbon-promo { background: #28a745; }      /* verde */
.ribbon-oferta { background: #dc3545; }     /* rojo */
.ribbon-nuevo { background: #007bff; }      /* azul */
.ribbon-popular { background: #fd7e14; }    /* naranja */
.ribbon-flash {
  background: linear-gradient(135deg, #6f42c1, #8e5cff);
  animation: flashAttention 1.2s infinite;
  box-shadow: 0 0 12px rgba(142, 92, 255, 0.8);
}

@keyframes flashAttention {
  0% {
    transform: rotate(-12deg) scale(1);
    box-shadow: 0 0 8px rgba(142, 92, 255, 0.6);
  }

  25% {
    transform: rotate(-12deg) scale(1.08);
    box-shadow: 0 0 18px rgba(142, 92, 255, 1);
  }

  50% {
    transform: rotate(-12deg) scale(1.05) translateX(1px);
  }

  75% {
    transform: rotate(-12deg) scale(1.08) translateX(-1px);
  }

  100% {
    transform: rotate(-12deg) scale(1);
    box-shadow: 0 0 8px rgba(142, 92, 255, 0.6);
  }
}

.ribbon-flash::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  opacity: 0;
  animation: shine 2s infinite;
}

@keyframes shine {
  0% { opacity: 0; transform: translateX(-100%); }
  50% { opacity: 1; }
  100% { opacity: 0; transform: translateX(100%); }
}

@keyframes pulse {
  0% { transform: rotate(var(--angle)) scale(1); }
  50% { transform: rotate(var(--angle)) scale(1.08); }
  100% { transform: rotate(var(--angle)) scale(1); }
}



/* ============================= */
/* CONTADOR */
/* ============================= */

.promo-countdown {
  position: absolute;
  bottom: -12px; /* 🔥 sobresale un poco */
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap; /* 🔥 evita salto de línea */
  background: #111;
  color: #fff;

  font-size: 11px;
  font-weight: bold;

  padding: 4px 8px;
  border-radius: 6px;

  box-shadow: 0 2px 6px rgba(0,0,0,0.3);

  z-index: 3;
}

.promo-countdown {
  display: inline-flex;      /* 🔥 mejor que inline-block */
  align-items: center;
  gap: 4px;

  white-space: nowrap;

  min-width: 60px;
  justify-content: center;
}





/* ============================= */
/* CONTENIDO */
/* ============================= */

.promo-content{
    flex:1;
    min-width:0;
}

/* TITULO */

.promo-title{
    font-size:1.2rem;
    font-weight:700;
    margin:0;
    line-height:1.2;
}

/* DESCRIPCION */

.promo-desc{
    font-size:1.25rem;
    font-weight: bold;
    color:#666;
    margin:6px 0;
}

/* PRECIO */

.promo-price{
    font-size:1.5rem;
    font-weight:800;
    color:var(--color-primario);
    margin:8px 0;
}

/* ============================= */
/* BOTONES */
/* ============================= */

.promo-actions{
    display:flex;
    gap:8px;
    margin-top:10px;
}

.promo-actions .btn{
    flex:1;
    font-size:.9rem;
    padding:10px;
    line-height:1.2;
}

/* ============================= */
/* ANIMACION */
/* ============================= */

.promo-anim{
    opacity:0;
    transform:translateY(20px);
    animation:promoFadeIn .6s ease-out forwards;
}

@keyframes promoFadeIn{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media (max-width:480px){

    .promo-card{
        flex:0 0 92%;
        max-width:92%;
    }

    .promo-img{
        width:85px;
        height:85px;
    }

    .promo-title{
        font-size:1.05rem;
    }

    .promo-price{
        font-size:1.25rem;
    }
}