/*=========================================
    TARJETAS PORTAL SERCOAS
==========================================*/

.portal-card{

    background:rgba(255,255,255,.95);

    border-radius:22px;

    padding:35px 30px;

    text-align:center;

    transition:all .35s ease;

    box-shadow:0 15px 40px rgba(0,0,0,.10);

    height:100%;

    position:relative;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.5);

}

/* Línea superior */

.portal-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:linear-gradient(90deg,#0B3D91,#2A7DE1);

}

/* Hover */

.portal-card:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 60px rgba(0,0,0,.18);

}

/* Círculo decorativo */

.portal-card::after{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    background:rgba(42,125,225,.06);

    border-radius:50%;

    top:-80px;
    right:-80px;

    transition:.4s;

}

.portal-card:hover::after{

    transform:scale(1.3);

}

/*======================================
ICONO
======================================*/

.icon-box{

    width:110px;

    height:110px;

    margin:auto;

    background:linear-gradient(135deg,#F8FBFF,#DCEEFF);

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.icon-box img{

    width:58px;

    transition:.4s;

}

.portal-card:hover .icon-box img{

    transform:scale(1.12) rotate(6deg);

}

/*======================================
TÍTULO
======================================*/

.portal-card h3{

    font-size:22px;

    color:#0B3D91;

    font-weight:700;

    margin-bottom:15px;

}

/*======================================
DESCRIPCIÓN
======================================*/

.portal-card p{

    color:#666;

    line-height:1.7;

    font-size:15px;

    min-height:70px;

}

/*======================================
BOTÓN
======================================*/

.btn-ingresar{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:20px;

    background:linear-gradient(45deg,#0B3D91,#2A7DE1);

    color:#fff;

    text-decoration:none;

    padding:14px 28px;

    border-radius:50px;

    font-weight:600;

    transition:.3s;

    box-shadow:0 12px 30px rgba(0,75,180,.25);

}

.btn-ingresar:hover{

    color:white;

    transform:translateY(-3px);

    box-shadow:0 18px 40px rgba(0,75,180,.35);

}

.btn-ingresar i{

    transition:.3s;

}

.btn-ingresar:hover i{

    transform:translateX(6px);

}

/*======================================
RESPUESTA AL CLIC
======================================*/

.portal-card:active{

    transform:scale(.98);

}

/*======================================
EFECTO GLASS
======================================*/

.portal-card{

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

}

/*======================================
ANIMACIÓN DE ENTRADA
======================================*/

.portal-card{

    animation:showCard .8s ease;

}

@keyframes showCard{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*======================================
RETRASO ENTRE TARJETAS
======================================*/

.col-lg-4:nth-child(1) .portal-card{animation-delay:.1s;}
.col-lg-4:nth-child(2) .portal-card{animation-delay:.2s;}
.col-lg-4:nth-child(3) .portal-card{animation-delay:.3s;}
.col-lg-4:nth-child(4) .portal-card{animation-delay:.4s;}
.col-lg-4:nth-child(5) .portal-card{animation-delay:.5s;}
.col-lg-4:nth-child(6) .portal-card{animation-delay:.6s;}



/*==========================
ANIMACIÓN SCROLL
==========================*/

.portal-card{

opacity:0;

transform:translateY(40px);

transition:.8s;

}

.portal-card.show{

opacity:1;

transform:translateY(0);

}

/*==========================
BOTÓN TOP
==========================*/

.top-button{

position:fixed;

bottom:30px;

right:30px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:linear-gradient(45deg,#0B3D91,#2A7DE1);

color:#fff;

font-size:20px;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.3s;

box-shadow:0 10px 30px rgba(0,0,0,.25);

z-index:9999;

}

.top-button.show{

opacity:1;

visibility:visible;

}

.top-button:hover{

transform:translateY(-5px);

}

/*==========================
RIPPLE
==========================*/

.btn-ingresar{

overflow:hidden;

position:relative;

}

.ripple{

position:absolute;

border-radius:50%;

transform:scale(0);

animation:ripple .6s linear;

background:rgba(255,255,255,.5);

pointer-events:none;

}

@keyframes ripple{

to{

transform:scale(4);

opacity:0;

}

}