@media screen and (max-width:950px) {

    body {
        padding: 10px;
        padding-top:30px;
    }

    .intro {
        width: 95%;
        padding: 15px 0px;
    }

    .intro h1 {
        font-size: 28px;
        letter-spacing: 0px;
        line-height: 28px;
        font-weight: 600;
        padding-bottom: 15px;
    }

    .temas-menu {
        display: flex;
        justify-content: center;
        gap: 2px;
        margin-bottom: 30px;
        flex-wrap: wrap;
    }

        .temas-menu button {
            white-space: nowrap; /* evita partir texto */
        }


    .mosaicos {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: auto;
        max-width: 1380px;
    }

    .mosaico {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
        margin-bottom: 40px;
    }

    .card {
        width: 100%;
        height: 300px;
        border-radius: 12px;
        background-size: cover;
        background-position: center;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        color: #fff;
        padding: 25px;
        filter: grayscale(0%);
        transition: filter 0.4s ease;
        cursor: pointer;
        flex: 0 0 100%;
    }

    .abalefty .img {
        height: 250px;
    }

    .abalefty .txtaba1 .tt0 {
        width: 95%;
    }

    .abalefty .bts {
        display: table;
        width: 100%;
        position: absolute;
        bottom: 30px;
        left: 15px;
    }

    .postredes {
        width: 96%;
        height: 96%;
        position: absolute;
        top: 3%;
        left: 2%;
        border: 1px dashed rgba(255,255,255,0.8);
        border-radius: 10px;
    }
}