body{
    background:#f4f7fb !important;
    overflow-x:hidden !important;
    font-family:'Poppins',sans-serif;
}

.portal-wrapper{
    min-height:100vh !important;
    display:flex !important;
    flex-direction:column !important;
}

/* ================= HEADER ================= */

.portal-header{
    padding:25px 0 !important;
    position:relative !important;
    overflow:hidden !important;
    box-shadow:0 4px 20px rgba(0,0,0,.15) !important;
}

.portal-header::before{
    content:'' !important;
    position:absolute !important;
    width:400px !important;
    height:400px !important;
    background:rgba(255,255,255,.08) !important;
    border-radius:50% !important;
    top:-150px !important;
    right:-120px !important;
}

.logo-box{
    width:90px !important;
    height:90px !important;
    background:white !important;
    border-radius:20px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-shadow:0 10px 25px rgba(0,0,0,.15) !important;
}

.logo-box img{
    max-width:80% !important;
    max-height:80% !important;
    object-fit:contain !important;
}

.portal-title{
    color:white !important;
    font-size:2rem !important;
    font-weight:800 !important;
    margin-bottom:5px !important;
}

.portal-subtitle{
    color:#dbe8ff !important;
    font-size:1rem !important;
    margin:0 !important;
}

/* ================= HERO ================= */

.hero-section{
    padding:80px 0 50px 0 !important;
    text-align:center !important;
    position:relative !important;
}

.hero-title{
    font-size:3rem !important;
    font-weight:800 !important;
    color:#1f2937 !important;
    margin-bottom:20px !important;
}

.hero-description{
    max-width:800px !important;
    margin:auto !important;
    color:#667085 !important;
    font-size:1.1rem !important;
    line-height:1.8 !important;
}

/* ================= CARDS ================= */

.credit-card{
    position:relative !important;
    border:none !important;
    border-radius:28px !important;
    overflow:hidden !important;
    transition:all .35s ease !important;
    cursor:pointer !important;
    min-height:360px !important;
    box-shadow:0 15px 35px rgba(0,0,0,.08) !important;
}

.credit-card:hover{
    transform:translateY(-12px) scale(1.02) !important;
    box-shadow:0 25px 45px rgba(0,0,0,.18) !important;
}

.card-icetex{
    background:linear-gradient(135deg,#004563 0%,#0d6efd 100%) !important;
}

.card-direct{
   position:relative !important;
}

.card-overlay{
    position:absolute !important;
    width:220px !important;
    height:220px !important;
    background:rgba(255,255,255,.1) !important;
    border-radius:50% !important;
    top:-80px !important;
    right:-60px !important;
}

.credit-card-body{
    position:relative !important;
    z-index:2 !important;
    padding:40px !important;
    color:white !important;
}

.card-icon{
    width:95px !important;
    height:95px !important;
    border-radius:24px !important;
    background:rgba(255,255,255,.18) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin-bottom:25px !important;
    backdrop-filter:blur(10px) !important;
}

.card-icon i{
    font-size:42px !important;
    color:white !important;
}

.card-title{
    font-size:2rem !important;
    font-weight:700 !important;
    margin-bottom:15px !important;
}

.card-description{
    color:rgba(255,255,255,.9) !important;
    line-height:1.8 !important;
    margin-bottom:30px !important;
}

.feature-list{
    list-style:none !important;
    padding:0 !important;
    margin-bottom:30px !important;
}

.feature-list li{
    margin-bottom:12px !important;
    font-size:15px !important;
}

.feature-list i{
    margin-right:10px !important;
    width:20px !important;
    text-align:center !important;
}

.btn-access{
    border:none !important;
    border-radius:15px !important;
    padding:14px 30px !important;
    background:white !important;
    color:#1f2937 !important;
    font-weight:700 !important;
    transition:all .3s ease !important;
    text-decoration:none !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:10px !important;
}

.btn-access:hover{
    transform:scale(1.05) !important;
    color:#000 !important;
}

/* ================= BENEFICIOS ================= */

.benefits-section{
    padding:80px 0 !important;
}

.benefit-card{
    background:white !important;
    border-radius:24px !important;
    padding:35px !important;
    text-align:center !important;
    box-shadow:0 10px 25px rgba(0,0,0,.06) !important;
    transition:all .3s ease !important;
    height:100% !important;
}

.benefit-card:hover{
    transform:translateY(-8px) !important;
}

.benefit-icon{
    width:80px !important;
    height:80px !important;
    border-radius:20px !important;
    background:#eef4ff !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:auto auto 20px auto !important;
}

.benefit-icon i{
    font-size:35px !important;
}

/* ================= FOOTER ================= */

.portal-footer{
    margin-top:auto !important;
    color:white !important;
    padding:60px 0 25px 0 !important;
}

.footer-title{
    font-size:1.3rem !important;
    font-weight:700 !important;
    margin-bottom:20px !important;
}

.footer-item{
    margin-bottom:12px !important;
    color:#cbd5e1 !important;
}

.footer-item i{
    margin-right:10px !important;
    color:#38bdf8 !important;
}

.footer-divider{
    border-top:1px solid rgba(255,255,255,.1) !important;
    margin-top:35px !important;
    padding-top:20px !important;
    text-align:center !important;
    color:#94a3b8 !important;
    font-size:14px !important;
}

@media(max-width:768px){

    .hero-title{
        font-size:2.2rem !important;
    }

    .credit-card{
        margin-bottom:25px !important;
    }

    .portal-title{
        font-size:1.5rem !important;
    }

}