/*====================================
 Bonito Artículos Relacionados
=====================================*/

.bar-contenedor{
    margin:50px 0;
    padding:30px;
    background:#f7f8fb;
    border-radius:18px;
    border:1px solid #e6e6e6;
}

.bar-titulo{
    text-align:center;
    font-size:32px;
    font-weight:700;
    color:#222;
    margin-bottom:30px;
}

.bar-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:25px;

}

.bar-card{

    background:#ffffff;

    border-radius:15px;

    overflow:hidden;

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

    transition:.35s;

    border:1px solid #ececec;

}

.bar-card:hover{

    transform:translateY(-8px);

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

}

.bar-imagen{

    display:block;

    overflow:hidden;

}

.bar-imagen img{

    width:100%;

    height:220px;

    object-fit:cover;

    display:block;

    transition:.4s;

}

.bar-card:hover img{

    transform:scale(1.08);

}

.bar-info{

    padding:20px;

}

.bar-info h3{

    margin:0 0 18px;

    font-size:20px;

    line-height:1.4;

    min-height:60px;

}

.bar-info h3 a{

    color:#222;

    text-decoration:none;

}

.bar-info h3 a:hover{

    color:#1e73be;

}

.bar-boton{

    display:block;

    width:100%;

    text-align:center;

    background:#2bb24c;

    color:#fff !important;

    text-decoration:none;

    font-weight:bold;

    padding:14px;

    border-radius:10px;

    transition:.30s;

    font-size:16px;

}

.bar-boton:hover{

    background:#21913c;

    transform:scale(1.03);

}

@media(max-width:992px){

.bar-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.bar-contenedor{

padding:20px;

}

.bar-grid{

grid-template-columns:1fr;

}

.bar-imagen img{

height:190px;

}

.bar-titulo{

font-size:26px;

}

.bar-info h3{

font-size:18px;

}

}

.bar-categoria{

display:inline-block;

background:#1e73be;

color:#fff;

padding:5px 12px;

border-radius:25px;

font-size:12px;

font-weight:bold;

margin-bottom:12px;

}

.bar-fecha{

font-size:13px;

color:#777;

margin-bottom:12px;

}

.bar-extracto{

font-size:15px;

line-height:1.6;

color:#555;

margin-bottom:20px;

min-height:72px;

}