/* FILE: public/css/style-home.css */

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #F4F6F9; }
::-webkit-scrollbar-thumb { background: #DF1943; border-radius: 4px; }

body { background-color: #F4F6F9; color: #212B36; padding-bottom: 110px; }
@media (min-width: 768px) { body { padding-bottom: 40px; } }

.header-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 280px;
    background: linear-gradient(135deg, #DF1943 0%, #B91536 100%);
    border-bottom-left-radius: 40px; border-bottom-right-radius: 40px;
    z-index: -1;
    transition: background 0.5s ease;
}

.fade-in { animation: fadeIn 0.6s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

.mask-gradient { 
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); 
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); 
}

.no-scrollbar::-webkit-scrollbar { display: none; }

.clean-card {
    background: #FFFFFF; border-radius: 20px;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(145, 158, 171, 0.1); transition: all 0.2s ease;
}
.clean-card:hover { box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.08); transform: translateY(-2px); }