.retorno {width: 100%;}
.retorno div {width: 90%; max-width: 1024px; margin: 40px auto;}
.retorno a {color: gray; text-decoration: none; padding: 10px; box-sizing: border-box; border-top: 1px solid gray; border-bottom: 1px solid gray;}
.retorno a:hover {color: red;}

.cont_blog {width: 100%; max-width: 2000px; margin: 30px auto;}
.column_blog {
	width: 90%; 
	margin: auto;
	display: grid; 
	grid-template-columns: 1fr 3fr;
}

.cont_blog .blogart {margin: 20px auto !important;}
.cont_blog .blogart img {width: 100%;}
.cont_blog .blogart div div {width: 100%; height: 100px; border-top: 1px solid gray; border-bottom: 1px solid gray; padding: 15px; box-sizing: border-box; margin-top: 10px;}
.cont_blog .blogart a {color: red; text-decoration: none;}
.cont_blog .blogart a:hover {color: darkblue;}

.aside { width: 100%; padding: 0 15px; box-sizing: border-box; }
.aside div div {margin: 0 0 10px 15px; height: 40px; border-left: 2px solid red; display: flex; align-items: center;}
.aside a { 
	padding-left: 10px; 
	box-sizing: border-box;
	color: gray;
	text-decoration: none;
}
.aside a:hover {color: red;}
.aside ul {margin-left: 20px;}
.aside li {margin-left: -15px; box-sizing: border-box; padding: 5px 0; border-bottom: 1px solid lightgray;}



.articulo {width: 100%; max-width: 1024px; margin: 20px auto 30px auto;}
.articulo h1 {font-size: 2em; border-bottom: 1px solid gray; padding: 10px 0; box-sizing: border-box; margin-bottom: 20px;}
.articulo h2 {border-bottom: 1px solid gray; padding: 10px 0; box-sizing: border-box; margin-bottom: 20px; color: gray; font-weight: 100;}
.articulo figure {z-index: 1; width: 100%; position: relative; height: 400px; overflow: hidden;}
.articulo figcaption {text-align: center; margin-bottom: 20px;}
.articulo img {width: 100%; height: 100%; object-fit: contain;}
.articulo p {margin: 20px auto; text-align: justify; columns: 200px 2; column-gap: 20px;} 
.articulo a {color: red; text-decoration: none;}
.articulo a:hover {color: darkblue;}

@media (max-width:1181px) {
    .articulo {max-width: 90%;}
}

@media (max-width:420px) { 
	.cont_blog {margin: 0 auto 30px auto; box-sizing: border-box;}
	.column_blog { width: 90%; grid-template-columns: repeat(1, 1fr);}
	.articulo {width: 90%; margin: auto;}
	.articulo figure {height: auto;}
	.blogart {margin-top: 50px;}
}


/* funciones para menu del blog */

.MB h2 {
    background-color: #dee1e3;
	padding: 10px;
	box-sizing: border-box;
	margin: 20px 0 10px 0;
}

/* estilos para el menu en columna */
.menublog {
    padding: 30px 10px;
    box-sizing: border-box;
    overflow-y: auto;
}

.menublog__list {
    list-style: none;
    padding: 5px 0;
    box-sizing: border-box;
}

.menublog__link {
    color: black;
    padding: 10px;
    box-sizing: border-box;
    text-decoration: none;
    border-left: 5px solid red;


    display: flex;
    align-items: center;

    position: relative;
    background-color: var(--bg, transparent);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.menublog__list:has( :checked ){
    --rows: 1fr;
    --rotate: rotate(180deg);

    --bg: #dee1e3;
}

.menublog__check {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    margin-left: -10px;
}

.menublog__arrow {
    margin-left: auto;
    transform: var(--rotate, 0);
    transition: 0.2s transform;
}

.menublog__cont {
    display: grid;
    grid-template-rows: var(--rows, 0fr);
    transition: .3s grid-template-rows;
}

.menublog__sub {
    overflow: hidden;
}

.menublog__li {
    width: 100%;
    list-style: none;
    margin-right: auto;  
    border-bottom: 1px solid lightgray;
}

.menublog__anchor {
    padding: 10px 0;
    box-sizing: border-box;
    display: block;
    text-decoration: none; 
}

.menublog a:hover {color: red;}