/**
 * Mejoras Visuales Intensas para Botones de Envío Gratis y Pedidos Online
 * Hace que estos botones sean más llamativos y visibles
 * Versión: 1.0
 */

/* ===== VARIABLES PARA COLORES INTENSOS ===== */
:root {
    --shipping-orange-start: #FF2500;
    --shipping-orange-mid: #FF4500;
    --shipping-orange-end: #FF6F00;
    --shipping-blue-start: #0A3D91;
    --shipping-blue-mid: #1565C0;
    --shipping-blue-end: #1976D2;
    --money-green-start: #1B5E20;
    --money-green-mid: #2E7D32;
    --money-green-end: #43A047;
    --promo-purple-start: #4A148C;
    --promo-purple-mid: #6A1B9A;
    --promo-purple-end: #8E24AA;
    --happy-pink-start: #AD1457;
    --happy-pink-mid: #C2185B;
    --happy-pink-end: #E91E63;
    --support-cyan-start: #004D40;
    --support-cyan-mid: #006064;
    --support-cyan-end: #00838F;
    --glow-intensity: 0.8;
    --pulse-duration: 2s;
}

/* ===== MEJORAS PARA ENVÍO GRATIS (bg-1) ===== */
.banner-features h4.bg-1 {
    background: linear-gradient(135deg, var(--shipping-orange-start) 0%, var(--shipping-orange-mid) 50%, var(--shipping-orange-end) 100%) !important;
    color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7) !important;
    border: 3px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 
        0 4px 15px rgba(255, 69, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 0 20px rgba(255, 69, 0, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.banner-features h4.bg-1::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    animation: shine-orange var(--pulse-duration) infinite;
}

.banner-features h4.bg-1::after {
    content: '🚚';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: 0.8;
}

/* ===== MEJORAS PARA AHORRA DINERO (bg-2) ===== */
.banner-features h4.bg-2 {
    background: linear-gradient(135deg, var(--money-green-start) 0%, var(--money-green-mid) 50%, var(--money-green-end) 100%) !important;
    color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7) !important;
    border: 3px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 
        0 4px 15px rgba(46, 125, 50, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 0 20px rgba(46, 125, 50, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.banner-features h4.bg-2::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    animation: shine-green var(--pulse-duration) infinite;
}

.banner-features h4.bg-2::after {
    content: '💰';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: 0.8;
}

/* ===== MEJORAS PARA PEDIDO ONLINE (bg-3) ===== */
.banner-features h4.bg-3 {
    background: linear-gradient(135deg, var(--shipping-blue-start) 0%, var(--shipping-blue-mid) 50%, var(--shipping-blue-end) 100%) !important;
    color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7) !important;
    border: 3px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 
        0 4px 15px rgba(13, 71, 161, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 0 20px rgba(13, 71, 161, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.banner-features h4.bg-3::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    animation: shine-blue var(--pulse-duration) infinite;
}

.banner-features h4.bg-3::after {
    content: '💻';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: 0.8;
}

/* ===== EFECTOS HOVER INTENSOS ===== */
.banner-features:hover h4.bg-1 {
    background: linear-gradient(135deg, #FF1500 0%, #FF3500 50%, #FF5500 100%) !important;
    transform: scale(1.08) rotateZ(1deg) !important;
    box-shadow: 
        0 8px 25px rgba(255, 69, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 0 30px rgba(255, 69, 0, 0.5) !important;
    border: 3px solid rgba(255, 255, 255, 0.7) !important;
    animation: intense-pulse-orange 1s infinite !important;
}

.banner-features:hover h4.bg-3 {
    background: linear-gradient(135deg, #082D81 0%, #1455B0 50%, #1666C2 100%) !important;
    transform: scale(1.08) rotateZ(-1deg) !important;
    box-shadow: 
        0 8px 25px rgba(13, 71, 161, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 0 30px rgba(13, 71, 161, 0.5) !important;
    border: 3px solid rgba(255, 255, 255, 0.7) !important;
    animation: intense-pulse-blue 1s infinite !important;
}

.banner-features:hover h4.bg-2 {
    background: linear-gradient(135deg, #0B4E10 0%, #1E6D22 50%, #339037 100%) !important;
    transform: scale(1.08) rotateZ(1deg) !important;
    box-shadow: 
        0 8px 25px rgba(46, 125, 50, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 0 30px rgba(46, 125, 50, 0.5) !important;
    border: 3px solid rgba(255, 255, 255, 0.7) !important;
    animation: intense-pulse-green 1s infinite !important;
}

.banner-features:hover h4.bg-4 {
    background: linear-gradient(135deg, #3A047C 0%, #5A0B8A 50%, #7A149A 100%) !important;
    transform: scale(1.08) rotateZ(-1deg) !important;
    box-shadow: 
        0 8px 25px rgba(106, 27, 154, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 0 30px rgba(106, 27, 154, 0.5) !important;
    border: 3px solid rgba(255, 255, 255, 0.7) !important;
    animation: intense-pulse-purple 1s infinite !important;
}

.banner-features:hover h4.bg-5 {
    background: linear-gradient(135deg, #9D0447 0%, #B2084B 50%, #D91E53 100%) !important;
    transform: scale(1.08) rotateZ(1deg) !important;
    box-shadow: 
        0 8px 25px rgba(194, 24, 91, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 0 30px rgba(194, 24, 91, 0.5) !important;
    border: 3px solid rgba(255, 255, 255, 0.7) !important;
    animation: intense-pulse-pink 1s infinite !important;
}

.banner-features:hover h4.bg-6 {
    background: linear-gradient(135deg, #003D30 0%, #005054 50%, #00787F 100%) !important;
    transform: scale(1.08) rotateZ(-1deg) !important;
    box-shadow: 
        0 8px 25px rgba(0, 96, 100, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 0 30px rgba(0, 96, 100, 0.5) !important;
    border: 3px solid rgba(255, 255, 255, 0.7) !important;
    animation: intense-pulse-cyan 1s infinite !important;
}

/* ===== ANIMACIONES MEJORADAS ===== */
@keyframes shine-orange {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
    100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
}

@keyframes shine-blue {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
    100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
}

@keyframes shine-green {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
    100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
}

@keyframes shine-purple {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
    100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
}

@keyframes shine-pink {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
    100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
}

@keyframes shine-cyan {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
    100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
}

@keyframes intense-pulse-orange {
    0%, 100% { 
        box-shadow: 
            0 8px 25px rgba(255, 69, 0, 0.7),
            inset 0 1px 0 rgba(255, 255, 255, 0.6),
            0 0 30px rgba(255, 69, 0, 0.5);
    }
    50% { 
        box-shadow: 
            0 12px 35px rgba(255, 69, 0, 0.9),
            inset 0 1px 0 rgba(255, 255, 255, 0.8),
            0 0 40px rgba(255, 69, 0, 0.7);
    }
}

@keyframes intense-pulse-blue {
    0%, 100% { 
        box-shadow: 
            0 8px 25px rgba(13, 71, 161, 0.7),
            inset 0 1px 0 rgba(255, 255, 255, 0.6),
            0 0 30px rgba(13, 71, 161, 0.5);
    }
    50% { 
        box-shadow: 
            0 12px 35px rgba(13, 71, 161, 0.9),
            inset 0 1px 0 rgba(255, 255, 255, 0.8),
            0 0 40px rgba(13, 71, 161, 0.7);
    }
}

@keyframes intense-pulse-green {
    0%, 100% { 
        box-shadow: 
            0 8px 25px rgba(46, 125, 50, 0.7),
            inset 0 1px 0 rgba(255, 255, 255, 0.6),
            0 0 30px rgba(46, 125, 50, 0.5);
    }
    50% { 
        box-shadow: 
            0 12px 35px rgba(46, 125, 50, 0.9),
            inset 0 1px 0 rgba(255, 255, 255, 0.8),
            0 0 40px rgba(46, 125, 50, 0.7);
    }
}

@keyframes intense-pulse-purple {
    0%, 100% { 
        box-shadow: 
            0 8px 25px rgba(106, 27, 154, 0.7),
            inset 0 1px 0 rgba(255, 255, 255, 0.6),
            0 0 30px rgba(106, 27, 154, 0.5);
    }
    50% { 
        box-shadow: 
            0 12px 35px rgba(106, 27, 154, 0.9),
            inset 0 1px 0 rgba(255, 255, 255, 0.8),
            0 0 40px rgba(106, 27, 154, 0.7);
    }
}

@keyframes intense-pulse-pink {
    0%, 100% { 
        box-shadow: 
            0 8px 25px rgba(194, 24, 91, 0.7),
            inset 0 1px 0 rgba(255, 255, 255, 0.6),
            0 0 30px rgba(194, 24, 91, 0.5);
    }
    50% { 
        box-shadow: 
            0 12px 35px rgba(194, 24, 91, 0.9),
            inset 0 1px 0 rgba(255, 255, 255, 0.8),
            0 0 40px rgba(194, 24, 91, 0.7);
    }
}

@keyframes intense-pulse-cyan {
    0%, 100% { 
        box-shadow: 
            0 8px 25px rgba(0, 96, 100, 0.7),
            inset 0 1px 0 rgba(255, 255, 255, 0.6),
            0 0 30px rgba(0, 96, 100, 0.5);
    }
    50% { 
        box-shadow: 
            0 12px 35px rgba(0, 96, 100, 0.9),
            inset 0 1px 0 rgba(255, 255, 255, 0.8),
            0 0 40px rgba(0, 96, 100, 0.7);
    }
}

/* ===== MEJORAS PARA PROMOCIONES (bg-4) ===== */
.banner-features h4.bg-4 {
    background: linear-gradient(135deg, var(--promo-purple-start) 0%, var(--promo-purple-mid) 50%, var(--promo-purple-end) 100%) !important;
    color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7) !important;
    border: 3px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 
        0 4px 15px rgba(106, 27, 154, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 0 20px rgba(106, 27, 154, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.banner-features h4.bg-4::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    animation: shine-purple var(--pulse-duration) infinite;
}

.banner-features h4.bg-4::after {
    content: '🎁';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: 0.8;
}

/* ===== MEJORAS PARA VENTA FELIZ (bg-5) ===== */
.banner-features h4.bg-5 {
    background: linear-gradient(135deg, var(--happy-pink-start) 0%, var(--happy-pink-mid) 50%, var(--happy-pink-end) 100%) !important;
    color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7) !important;
    border: 3px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 
        0 4px 15px rgba(194, 24, 91, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 0 20px rgba(194, 24, 91, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.banner-features h4.bg-5::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    animation: shine-pink var(--pulse-duration) infinite;
}

.banner-features h4.bg-5::after {
    content: '😊';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: 0.8;
}

/* ===== MEJORAS PARA SOPORTE 24/7 (bg-6) ===== */
.banner-features h4.bg-6 {
    background: linear-gradient(135deg, var(--support-cyan-start) 0%, var(--support-cyan-mid) 50%, var(--support-cyan-end) 100%) !important;
    color: #ffffff !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7) !important;
    border: 3px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 
        0 4px 15px rgba(0, 96, 100, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 0 20px rgba(0, 96, 100, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.banner-features h4.bg-6::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    animation: shine-cyan var(--pulse-duration) infinite;
}

.banner-features h4.bg-6::after {
    content: '🛠️';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    opacity: 0.8;
}

/* ===== EFECTOS ESPECIALES PARA LLAMAR LA ATENCIÓN ===== */
.banner-features h4.bg-1,
.banner-features h4.bg-2,
.banner-features h4.bg-3,
.banner-features h4.bg-4,
.banner-features h4.bg-5,
.banner-features h4.bg-6 {
    animation: subtle-glow var(--pulse-duration) infinite alternate !important;
}

@keyframes subtle-glow {
    from {
        filter: brightness(1) saturate(1);
    }
    to {
        filter: brightness(1.1) saturate(1.2);
    }
}

/* ===== MEJORAS PARA DISPOSITIVOS MÓVILES ===== */
@media (max-width: 768px) {
    .banner-features h4.bg-1::after,
    .banner-features h4.bg-2::after,
    .banner-features h4.bg-3::after,
    .banner-features h4.bg-4::after,
    .banner-features h4.bg-5::after,
    .banner-features h4.bg-6::after {
        font-size: 12px;
        right: 6px;
    }
    
    .banner-features h4.bg-1,
    .banner-features h4.bg-2,
    .banner-features h4.bg-3,
    .banner-features h4.bg-4,
    .banner-features h4.bg-5,
    .banner-features h4.bg-6 {
        font-size: 14px !important;
        padding: 6px 14px !important;
        letter-spacing: 0.5px !important;
    }
    
    .banner-features:hover h4.bg-1,
    .banner-features:hover h4.bg-2,
    .banner-features:hover h4.bg-3,
    .banner-features:hover h4.bg-4,
    .banner-features:hover h4.bg-5,
    .banner-features:hover h4.bg-6 {
        transform: scale(1.05) !important;
    }
}

/* ===== MEJORAS PARA DISPOSITIVOS TÁCTILES ===== */
@media (hover: none) and (pointer: coarse) {
    .banner-features h4.bg-1,
    .banner-features h4.bg-3 {
        animation: mobile-attention 3s infinite !important;
    }
    
    @keyframes mobile-attention {
        0%, 90%, 100% {
            transform: scale(1);
        }
        95% {
            transform: scale(1.02);
        }
    }
}

/* ===== ACCESIBILIDAD Y CONTRASTE ===== */
@media (prefers-contrast: high) {
    .banner-features h4.bg-1 {
        background: #FF4500 !important;
        border: 4px solid #ffffff !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 1) !important;
    }
    
    .banner-features h4.bg-3 {
        background: #0D47A1 !important;
        border: 4px solid #ffffff !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 1) !important;
    }
}

/* ===== REDUCIR MOVIMIENTO PARA USUARIOS SENSIBLES ===== */
@media (prefers-reduced-motion: reduce) {
    .banner-features h4.bg-1,
    .banner-features h4.bg-3 {
        animation: none !important;
    }
    
    .banner-features h4.bg-1::before,
    .banner-features h4.bg-3::before {
        animation: none !important;
    }
    
    .banner-features:hover h4.bg-1,
    .banner-features:hover h4.bg-3 {
        transform: scale(1.02) !important;
        animation: none !important;
    }
}