/* css/promo_banner.css
   Banner promocional reutilizable. Se usa en:
   - proyecto_detalle.php (vista pública, debajo del plano)
   - modals/modal_proyecto.php (vista previa al editar)
*/

.promo-banner {
    position: relative;
    width: 100%;
    padding: 22px 18px;
    border-radius: 12px;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    margin: 0 auto;
}

.promo-banner-text {
    font-family: 'Impact', 'Oswald', 'Bebas Neue', sans-serif;
    font-size: clamp(1.4rem, 3.4vw, 2.2rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    word-break: break-word;
    white-space: pre-wrap;
}

/* === PALETAS === */
.promo-paleta-oferta_fuego {
    background: linear-gradient(135deg, #ff3b3b 0%, #ffae00 100%);
    color: #fff;
}
.promo-paleta-oferta_fuego .promo-banner-text {
    color: #fff;
    text-shadow: 2px 2px 0 #b51616, 4px 4px 12px rgba(0,0,0,0.35);
}

.promo-paleta-dorado_premium {
    background: linear-gradient(135deg, #1a1a1a 0%, #3a2c00 100%);
    color: #ffd24d;
}
.promo-paleta-dorado_premium .promo-banner-text {
    color: #ffd24d;
    text-shadow: 2px 2px 0 #000, 0 0 14px rgba(255, 210, 77, 0.55);
}

.promo-paleta-neon_morado {
    background: linear-gradient(135deg, #2b0a4a 0%, #6f00b0 100%);
    color: #fff;
}
.promo-paleta-neon_morado .promo-banner-text {
    color: #00f0ff;
    text-shadow: 0 0 6px #00f0ff, 0 0 14px #ff00ea, 2px 2px 0 #2b0a4a;
}

.promo-paleta-verde_descuento {
    background: linear-gradient(135deg, #138a3f 0%, #2dcc70 100%);
    color: #fff;
}
.promo-paleta-verde_descuento .promo-banner-text {
    color: #fff;
    text-shadow: 2px 2px 0 #0b5524, 4px 4px 10px rgba(0,0,0,0.3);
}

/* === BORDE TIPO CÓMIC (toggle) === */
.promo-banner.promo-borde .promo-banner-text {
    -webkit-text-stroke: 1.5px #000;
    paint-order: stroke fill;
}

/* === ANIMACIONES === */
@keyframes promoPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}
@keyframes promoShake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-5px) rotate(-0.5deg); }
    40%      { transform: translateX(5px) rotate(0.5deg); }
    60%      { transform: translateX(-3px); }
    80%      { transform: translateX(3px); }
}
@keyframes promoBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
@keyframes promoGlow {
    0%, 100% { box-shadow: 0 0 12px rgba(255,255,0,0.4), 0 6px 20px rgba(0,0,0,0.2); }
    50%      { box-shadow: 0 0 32px rgba(255,255,0,0.95), 0 6px 24px rgba(0,0,0,0.3); }
}
@keyframes promoFlash {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}
@keyframes promoMarquee {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.promo-anim-pulse   { animation: promoPulse   1.6s ease-in-out infinite; }
.promo-anim-shake   { animation: promoShake   0.9s ease-in-out infinite; }
.promo-anim-bounce  { animation: promoBounce  1.2s ease-in-out infinite; }
.promo-anim-glow    { animation: promoGlow    1.8s ease-in-out infinite; }
.promo-anim-flash   { animation: promoFlash   0.9s ease-in-out infinite; }
.promo-anim-ninguna { animation: none; }

/* Marquee: el contenedor no se anima, solo el texto se desplaza horizontalmente */
.promo-anim-marquee { animation: none; }
.promo-anim-marquee .promo-banner-text {
    display: inline-block;
    white-space: nowrap;
    animation: promoMarquee 14s linear infinite;
    text-transform: uppercase;
}

/* Reducir movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
    .promo-anim-pulse,
    .promo-anim-shake,
    .promo-anim-bounce,
    .promo-anim-glow,
    .promo-anim-flash { animation: none !important; }
    .promo-anim-marquee .promo-banner-text { animation: none !important; white-space: normal; }
}