roi-theme/wp-content/themes/apus-theme/assets/css/cta-box-sidebar.css

/**
 * CTA Box Sidebar Styles
 *
 * Styles for the CTA box component that appears in the sidebar
 * below the Table of Contents on single posts.
 *
 * @package Apus_Theme
 * @since 1.0.0
 */

/* ========================================
   CTA Box Container
   ======================================== */

.cta-box-sidebar {
    background: linear-gradient(135deg, #FF8600 0%, #FFB800 100%);
    border-radius: 10px; /* Template: 10px */
    padding: 1.25rem; /* Template: 1.25rem */
    box-shadow: 0 6px 20px rgba(255, 133, 0, 0.3); /* Template: 6px 20px */
    position: relative; /* Template: relative for ::before */
    overflow: hidden; /* Template: overflow hidden */
    transition: all 0.3s ease; /* Template: transition */
    text-align: center; /* Template: center */
}

/* Template: Pseudo-element with pulse animation */
.cta-box-sidebar::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    animation: cta-pulse 4s ease-in-out infinite;
}

@keyframes cta-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.4;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.6;
    }
}

.cta-box-sidebar:hover {
    transform: translateY(-3px); /* Template: -3px */
    box-shadow: 0 10px 28px rgba(255, 133, 0, 0.4); /* Template hover shadow */
}

/* ========================================
   CTA Box Content
   ======================================== */

.cta-box-title {
    color: #ffffff;
    font-size: 1rem; /* Template: 1rem */
    font-weight: 700;
    margin-bottom: 0.65rem; /* Template: 0.65rem */
    position: relative; /* Template: relative */
    z-index: 1; /* Template: z-index 1 */
    line-height: 1.3; /* Template: 1.3 */
}

.cta-box-text {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.85rem; /* Template: 0.85rem */
    margin-bottom: 1rem;
    line-height: 1.4; /* Template: 1.4 */
    position: relative; /* Template: relative */
    z-index: 1; /* Template: z-index 1 */
}

/* ========================================
   CTA Button
   ======================================== */

.btn-cta-box {
    background: #ffffff;
    color: #FF8600;
    font-weight: 600;
    padding: 0.65rem 1.5rem; /* Template: 0.65rem 1.5rem */
    border-radius: 8px;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Template shadow */
    position: relative; /* Template: relative */
    z-index: 1; /* Template: z-index 1 */
}

.btn-cta-box:hover {
    background: #f8f9fa; /* Template: #f8f9fa */
    transform: scale(1.05); /* Template: scale(1.05) */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); /* Template hover shadow */
    color: #FF6B35; /* Template: #FF6B35 */
}

.btn-cta-box:active {
    transform: scale(0.98);
}

.btn-cta-box:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* ========================================
   Icon Spacing
   ======================================== */

.btn-cta-box i {
    vertical-align: middle;
}

/* ========================================
   Responsive Design
   ======================================== */

/* Hide on tablets and mobile */
@media (max-width: 991px) {
    .cta-box-sidebar {
        display: none; /* Ocultar en móviles */
    }
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
    .cta-box-sidebar {
        display: none;
    }
}