/* ========================================
   ESTILOS PERSONALIZADOS PARA BANNERS
   ======================================== */

/* ===== CLASES DE EJEMPLO PARA BOTONES ===== */

/* Botón con sombra */
.btn-shadow {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important;
}

/* Botón con efecto hover elevado */
.btn-lift:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3) !important;
}

/* Botón con borde redondeado */
.btn-rounded {
    border-radius: 25px !important;
}

/* Botón más grande */
.btn-large {
    font-size: 1.8rem !important;
    padding: 1.2rem 2rem !important;
}

/* Botón más pequeño */
.btn-small {
    font-size: 1.2rem !important;
    padding: 0.6rem 1rem !important;
}

/* Botón con efecto pulsante */
.btn-pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

/* Botón con borde */
.btn-bordered {
    border: 2px solid #003c75 !important;
    background-color: transparent !important;
}

/* Botón con efecto zoom */
.btn-zoom:hover {
    transform: scale(1.05) !important;
}

/* ===== CLASES DE EJEMPLO PARA COUNTDOWN ===== */

/* Countdown con sombra */
.countdown-shadow {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

/* Countdown con efecto de brillo */
.countdown-glow {
    filter: drop-shadow(0 0 8px rgba(244, 231, 47, 0.6));
}

/* Countdown con borde adicional */
.countdown-border {
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
}

/* Countdown con animación de entrada */
.countdown-animate-in {
    animation: slideInDown 0.5s ease-out;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Countdown con escala suave */
.countdown-scale-up {
    animation: scaleUp 0.6s ease-out;
}

@keyframes scaleUp {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== CLASES UNIVERSALES ===== */

/* Efecto fade in */
.fade-in {
    animation: fadeIn 0.8s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Efecto de rotación suave */
.rotate-slight {
    animation: rotateSlight 3s ease-in-out infinite;
}

@keyframes rotateSlight {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(1deg);
    }
}

/* Agregar más clases personalizadas aquí según necesites */

.lugar_dif1{
    position: absolute !important;
    display: flex !important;
    gap: 10px !important;
    z-index: 10 !important;
    opacity: 1 !important;
    top: 31rem !important;
    left: 12rem !important;
    inset: auto auto auto auto;
    height: fit-content;

}

.banner_l_dif1.btn-center{
    left: 76% !important;
    top: 33rem !important;
}