.text-with-image {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-bottom: 20px;
        
    }
    .text-with-image img {
        margin-top: -5px;
        margin-left: 10px;
        width: 400px;
        height: auto;
    }
    .text-with-image p {
        font-family: inherit;
        text-align:justify;
        margin-top: 0px;
    }

@media (max-width:768px){

    .text-with-image img {
        margin-top: -5px;
        margin-left: 5px;
        width: 190px;
        height: auto;
    }
    .text-with-image p {
        font-size:16px;
    }

}

/*==================================================
                ESPACIOS FÍSICOS
==================================================*/

.espacios-section{

    margin-top:55px;
    margin-bottom:40px;

}

/* Encabezado */

.espacios-header{

    background:#b5b5b5;
    padding:35px 20px 90px;
    position:relative;
    border-radius:8px 8px 0 0;
}

.espacios-header h2{

    color:#FFD400;
    text-align:center;
    font-family:inherit;
    font-size:32px;
    font-weight:bold;
    line-height:1.3;
    margin:0;
}

.linea-amarilla{

    position:absolute;
    left:0;
    right:0;
    bottom:0;

    height:6px;

    background:#FFD400;

}

/* Tarjetas */

.espacios-container{

    display:flex;

    justify-content:space-evenly;

    align-items:flex-start;

    gap:40px;

    margin-top:-75px;

    padding-bottom:20px;

}

.espacio-card{

    text-align:center;

}

.circulo{

    position:relative;

    width:150px;

    margin:auto;

}

.circulo>img{

    width:150px;

    height:150px;

    border-radius:50%;

    border:6px solid #FFD400;

    object-fit:cover;

    transition:.35s;

}

/* Hover */

.preview{

    position:absolute;

    top:215px;

    left:50%;

    transform:translateX(-50%) translateY(15px);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:10;

}

.preview img{

    width:380px;

    border-radius:10px;

    box-shadow:0 12px 35px rgba(0,0,0,.25);

}

.circulo:hover .preview{

    opacity:1;

    visibility:visible;

    transform:translateX(-50%) translateY(0);

}

.circulo:hover>img{

    transform:scale(1.05);

}

.espacio-card h4{

    margin-top:18px;

    font-family:inherit;

    font-weight:700;

    font-size:30px;

    color:#222;

}

/*==========================
        Responsive
==========================*/

@media(max-width:991px){

    .espacios-header h2{

        font-size:24px;
        text-align:justify;

    }

    .preview img{

        width:280px;

    }

}

@media(max-width:768px){

    .espacios-container{

        flex-direction:column;

        margin-top:30px;

        gap:45px;

    }

    .espacios-header{

        padding:30px;

    }

    .linea-amarilla{

        display:none;

    }

    .preview{

        position:static;

        opacity:1;

        visibility:visible;

        transform:none;

        margin-top:20px;

    }

    .preview img{

        width:100%;

        max-width:320px;

    }

}