/*
|--------------------------------------------------------------------------
| EMFORSOL
| COMPONENTE CARD
|--------------------------------------------------------------------------
*/

.card{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    min-height:230px;

    padding:0;

    border-radius:22px;

    background:

        linear-gradient(
            135deg,
            rgba(42,46,52,.82),
            rgba(22,24,27,.70)
        );

    backdrop-filter:blur(18px);

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

    box-shadow:

        0 12px 40px rgba(0,0,0,.35);

    transition:

        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}

.card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:

        linear-gradient(
            90deg,
            #00C6FF,
            #0072FF
        );

}

.card:hover{

    transform:translateY(-8px);

    border-color:rgba(0,198,255,.40);

    box-shadow:

        0 24px 55px rgba(0,0,0,.45),

        0 0 28px rgba(0,114,255,.18);

}

.card__contenido{

    display:flex;

    flex-direction:column;

    gap:18px;

    height:100%;

    padding:28px;

}

.card__icono{

    display:flex;

    align-items:center;

    justify-content:center;

    width:72px;

    height:72px;

    border-radius:18px;

    font-size:2rem;

    background:

        linear-gradient(
            135deg,
            rgba(0,198,255,.18),
            rgba(0,114,255,.10)
        );

    border:1px solid rgba(0,198,255,.18);

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.08),

        0 10px 28px rgba(0,114,255,.18);

}

.card__titulo{

    margin:0;

    font-size:1.35rem;

    font-weight:700;

    color:#ffffff;

    letter-spacing:.02rem;

}

.card__subtitulo{

    margin:0;

    color:#bfc8d2;

    line-height:1.6;

    font-size:.95rem;

}

.card__estadisticas{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:auto;

}

.card__dato{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 16px;

    border-radius:12px;

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

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

}

.card__etiqueta{

    color:#9ea8b5;

    font-size:.86rem;

    font-weight:500;

}

.card__valor{

    color:#ffffff;

    font-size:1rem;

    font-weight:700;

}

.card:focus-within{

    outline:none;

    border-color:rgba(0,198,255,.45);

    box-shadow:

        0 0 0 4px rgba(0,198,255,.12),

        0 20px 50px rgba(0,0,0,.45);

}

.card:active{

    transform:translateY(-3px);

}

@media (max-width:1200px){

    .card{

        min-height:210px;

    }

}

@media (max-width:768px){

    .card{

        min-height:185px;

    }

    .card__contenido{

        padding:22px;

    }

    .card__icono{

        width:60px;

        height:60px;

        font-size:1.7rem;

    }

}

@media (max-width:480px){

    .card{

        border-radius:18px;

        min-height:170px;

    }

    .card__contenido{

        padding:18px;

    }

    .card__titulo{

        font-size:1.15rem;

    }

    .card__subtitulo{

        font-size:.88rem;

    }

}