.hero-tema{
    position: relative;
    width: 100%; 
    margin-bottom: 30px;
    height: 33vh;
    min-height: 260px;

    color:#fff;
    display: flex; align-items: center; justify-content: center; flex-direction: column; 
    background-color:rgb(33, 32, 32);
}

.hero-tema .foto-bg{
    position: absolute; left: 0; top: 0; 
    width: 50%; height: 100%; z-index: 0;
    background-position-x: center;
    background-position-y: 20%;
    background-size: cover;    
    background-color:#f5c0c3;    
    background-blend-mode: multiply;
    filter: grayscale(.6)
}

.hero-tema .foto-bg .gradient{
    width: 65%; height: 100%;
    position: absolute; right: 0; top: 0;
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(32,32,32,0) 0%, rgba(32,32,32,1) 100%);
}

.hero-tema .descripcion{z-index: 10; display: flex; flex-direction: column;
width: 70%; margin-left: auto; padding-right: 10%;
}
.hero-tema .descripcion h2{font-size: 2.6em}
.hero-tema .descripcion p{font-size: 1.1em; line-height: 1.4em; margin-bottom: .5rem}

.hero-tema .tags {font-size: .9em;line-height: 1em; margin-top: 1rem; display: flex;  align-items: center; flex-wrap: wrap; 
margin-left: -5px; margin-right: -5px
}
.hero-tema .tags a,
.hero-tema .tags span  {margin-left: 5px; margin-right: 5px; border-radius: 3px; background-color: rgba(0, 0, 0, 0.432); padding: 5px; }
.hero-tema .tags span  {background-color:transparent; padding: 0}


.hero-tema .tags a:hover {text-decoration: none; color: inherit; background-color:#b9121b }


/*.titulo-pagina{display: none}*/

@media screen and (max-width: 768px){
    .hero-tema {height: auto; }
    .hero-tema .descripcion{padding: 10% ;}
    .hero-tema .tags > span{ margin-left: auto; margin-right: auto; width: 100%; }
    .hero-tema .tags a{margin-top: 10px}

    .hero-tema .descripcion h2{font-size: 2em}
    .hero-tema .descripcion p{font-size: 1em}
    .hero-tema .tags{font-size: .8em}
}


/*
.titulo-pagina{display: none} 

.hero-tema{
    width: 100%; 
    display: flex; align-items: center; justify-content: center; 
    background-color: #272727; color: #fff;
    border-radius: 2px;
    padding: 20px;
    margin-bottom: 30px;
}
.hero-tema > .row{display: flex; }


.hero-tema .foto{
    flex: 0 33%;
    border-top-left-radius:2px; 
    border-bottom-left-radius:2px; 
}

.hero-tema .descripcion h2{    font-size: 26px;}
.hero-tema .descripcion p{margin-bottom: .7rem}
.hero-tema .descripcion p:last-child{margin-bottom: 0}
*/