/*==========================================
        MODAL JERARQUÍAS
==========================================*/

.jerarquia-modal{

    border:none;

    border-radius:25px;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        rgba(240,249,255,.98),
        rgba(223,242,255,.97)
    );

    box-shadow:0 20px 60px rgba(13,110,253,.18);

}

.jerarquia-modal .modal-header{

    background:linear-gradient(
        135deg,
        #4facfe,
        #00c6fb
    );

    color:#fff;

    border:none;

}

.jerarquia-modal .btn-close{

    filter:invert(1);

}

.jerarquia-modal .modal-body{

    padding:30px;

}


/*==========================================
            IMAGEN
==========================================*/

.jerarquia-img{

    width:100%;

    max-height:320px;

    object-fit:contain;

    border-radius:18px;

    background:#fff;

    padding:12px;

    border:5px solid #fff;

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

}


/*==========================================
            TABLA
==========================================*/

.jerarquia-modal table th{

    width:210px;

    color:#0d6efd;

    font-weight:700;

}

.jerarquia-modal table td{

    color:#555;

}


/*==========================================
        CARD ENERGÍA
==========================================*/

.jerarquia-card{

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

    border-left:5px solid #4facfe;

    border-radius:15px;

    padding:20px;

    margin-top:15px;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.jerarquia-card h5{

    color:#0d6efd;

    font-weight:700;

    margin-bottom:15px;

}

.jerarquia-card p{

    line-height:1.8;

    color:#444;

    text-align:justify;

}

/*==========================================
            EFECTO HOVER IMAGEN
==========================================*/

.jerarquia-modal img:hover{

    transform:scale(1.02);

    transition:.35s;

}