.alejo-cta-buttons { display: flex; flex-direction: column; gap: 12px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif; max-width: 100%; } .alejo-cta-btn { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #161616; border: 1px solid #2a2a2a; border-radius: 12px; text-decoration: none !important; color: #ffffff; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; box-sizing: border-box; } .alejo-cta-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); transition: left 0.6s ease; pointer-events: none; } .alejo-cta-btn:hover::before { left: 100%; } .alejo-cta-btn-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.3s ease; } .alejo-cta-btn:hover .alejo-cta-btn-icon { transform: scale(1.08) rotate(-4deg); } .alejo-cta-btn-icon svg { width: 24px; height: 24px; fill: #ffffff; } .alejo-cta-btn-text { flex: 1; text-align: left; min-width: 0; } .alejo-cta-btn-title { display: block; font-size: 15px; font-weight: 600; color: #ffffff; margin-bottom: 2px; line-height: 1.3; } .alejo-cta-btn-subtitle { display: block; font-size: 12px; color: #a3a3a3; line-height: 1.3; } .alejo-cta-btn-arrow { font-size: 20px; color: #737373; transition: transform 0.3s ease, color 0.3s ease; flex-shrink: 0; line-height: 1; } .alejo-cta-btn:hover .alejo-cta-btn-arrow { transform: translateX(4px); color: #ffffff; } .alejo-cta-btn-youtube:hover { border-color: #c4302b; background: #1a1010; transform: translateY(-2px); box-shadow: 0 8px 24px -8px rgba(196, 48, 43, 0.45); } .alejo-cta-btn-youtube .alejo-cta-btn-icon { background: #c4302b; } .alejo-cta-btn-telegram:hover { border-color: #0088cc; background: #0e1419; transform: translateY(-2px); box-shadow: 0 8px 24px -8px rgba(0, 136, 204, 0.45); } .alejo-cta-btn-telegram .alejo-cta-btn-icon { background: #0088cc; } @media (max-width: 480px) { .alejo-cta-btn { padding: 14px 14px; gap: 12px; } .alejo-cta-btn-icon { width: 40px; height: 40px; } .alejo-cta-btn-icon svg { width: 22px; height: 22px; } .alejo-cta-btn-title { font-size: 14px; } .alejo-cta-btn-subtitle { font-size: 11px; } }