.banner-image {
    background-image: url('https://images.unsplash.com/photo-1634913940926-dc70e78b394b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=871&q=80')
}

.opciones {
    display: flex;
}

    .opciones button {
        flex: 1;
        padding-block: 0.75em;
        border: none;
        font-size: 1.25rem;
        font-family: 'IBM Plex Sans', sans-serif;
        background-color: hsl(var(--gray));
        cursor: pointer;
    }

        .opciones button:hover {
            font-weight: 700;
        }

        .opciones button.active {
            background-color: hsl(var(--light-blue));
            font-weight: 700;
            color: whitesmoke;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
        }

.gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: dense;
    max-width: 1600px;
    margin: auto;
}

#gallery-empresariales, #gallery-personales {
    opacity: 0;
    transition: opacity 500ms ease;
    height: 0;
    overflow: hidden;
}

    #gallery-empresariales.active, #gallery-personales.active {
        opacity: 1;
        transition: opacity 500ms ease;
        height: auto;
    }

.titulo h3 {
    font-size: 1.5rem;
    margin-bottom: 0;
}

.gallery p {
    margin-bottom: 0;
}

.info {
    padding: 4em;
}

.titulo {
    position: relative;
    margin-bottom: 2em;
    background-color: hsl(var(--white-blue));
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.icono {
    position: absolute;
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: hsl(var(--gray));
    padding: 0.5rem;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

    .icono img {
        width: 80%;
    }

.der {
    grid-column-end: -1;
}

    .der .titulo {
        padding: 0.5em 3em 0.5em 1em;
        margin-right: 2rem;
    }

    .der .icono {
        right: -2rem;
        top: calc(50% - 2rem);
    }

.izq .titulo {
    padding: 0.5em 1em 0.5em 3em;
    margin-left: 2rem;
}

.izq .icono {
    left: -2em;
    top: calc(50% - 2rem);
}

/***** IMAGENES ****/
/***** personales ****/
.banner-image {
    background-image: url('https://images.unsplash.com/photo-1628348068343-c6a848d2b6dd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80');
}

.gallery .imagen {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.auto {
    background-image: url('https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80');
}

.medico {
    background-image: url('https://images.unsplash.com/photo-1530497610245-94d3c16cda28?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80')
}

.vida {
    background-image: url('https://images.unsplash.com/photo-1502740479091-635887520276?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=869&q=80')
}

.ahorro {
    background-image: url('https://images.unsplash.com/photo-1624454003060-fc7189ed6242?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80')
}

.hogar {
    background-image: url('https://images.unsplash.com/photo-1549517045-bc93de075e53?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=871&q=80')
}

/**** empresariales ****/
.flotilla {
    background-image: url('https://images.unsplash.com/photo-1590504805643-bb1f94cde7fd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80');
}

.pyme {
    background-image: url('https://images.unsplash.com/photo-1583911300103-0aaeff286030?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80');
}

.medico-colectivo {
    background-image: url('https://images.unsplash.com/photo-1601055283742-8b27e81b5553?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80');
}

.vida-grupo {
    background-image: url('https://images.unsplash.com/photo-1600880292089-90a7e086ee0c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80');
}

.comercial {
    background-image: url('https://images.unsplash.com/photo-1565891741441-64926e441838?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80')
}

@media only screen and (max-width: 998px) {
    .gallery {
        grid-template-columns: 1fr;
    }

        .gallery .imagen {
            height: 200px;
        }
}

@media only screen and (max-width: 600px) {
    .info {
        padding-inline: 2em;
    }

    .titulo h3 {
        font-size: 1.25rem;
        margin-bottom: 0;
    }
}