/* Variables
----------------------------------------------------------------------------------------------------------------- */
@import './../constants.css';

.page--servicio {
    padding: 80px 0 50px;
    margin: auto;
    background-color: #fff;
}
.page--servicio[nodisplayed] { 
    display: none;
}

    .servicio--header {
        padding: 20px 0 0px;
        display: flex; flex-direction: column;
        background-color: var(--color--representative5);
    }

    .page--servicio  h1 {
        width: 1050px;
        margin: auto;

        font-size: 2.1rem;
        color: #fff;
        letter-spacing: 2px;
        text-align: center;
        font-weight: bold;
    }

    .page--servicio h2 {
        width: 1050px;
        margin: auto;
        margin-bottom: var(--padding--insideElements);

        font-size: 1.5rem;
        color: #fff;
        letter-spacing: 2px;
        text-align: center;

        font-weight: bold;
    }

    .servicio--header > p {
        width: 1050px;
        margin: auto;

        color: #fff;
    }

    .servicio--header > .separador {
        margin: 30px 50px 20px;
        border-bottom: solid 2px #fff;
    }

    .informational {
        width: 1050px;
        margin: auto;
        margin-top: 10px; margin-bottom: 50px;
        display: flex; flex-direction: row;
    }
    .informational label {
        margin: auto;

        font-size: 1.1rem;
        color: #fff;
    }

    .servicio--content {
        width: 1050px;
        margin: auto;
        position: relative;
    }

        .content--otrosServicios {
            width: 350px; max-height: 400px;
            border-radius: 5px;
            margin-left: 20px; margin-bottom: 10px;
            float: right;
            background-color: #fff;
            box-shadow: 0px 0px 15px 0px var(--color--shadow);
        }

            .content--otrosServicios h4 {
                padding: 20px 0 12px 30px;
                border-radius: 5px 5px 0 0;
                background-color: var(--color--representative1);

                color: #fff;
                font-weight: bold;
                text-align: left;
            }

            .otrosServicios--card {
                padding: 18px 15px 0;
                display: flex;
            }
            .otrosServicios--card p {
                width: 100%;
                padding-bottom: 18px; padding-left: 25px;
                border-bottom: solid 2px #e6e2e2;
                margin: auto auto auto auto;

                font-size: 18px;
            }
            .otrosServicios--card:last-child p {
                border: none;
            }

            .otrosServicios--card:hover {
                background-color: var(--color--actionStrong);

                cursor: pointer;
            }
            .otrosServicios--card:hover p {
                border-color: var(--color--actionStrong);

                color: #fff !important;
            }
 
    .page--servicio .servicio--content h3 {
        margin: 40px 0 15px;
        font-size: 1.3rem;
        color: var(--color--lightBlack);
        letter-spacing: 2px;
        text-align: left;

        font-weight: bold;
    }

    .separador {
        margin: 30px var(--padding--insideInterfaces) 20px;
        border-bottom: solid 2px var(--color--lightBlack);
    }

    .page--servicio .servicio--content p {
        font-size: 1.02rem;
        color: var(--color--lightBlack);
        letter-spacing: 1px;
    }


@media only screen and (max-width: 1086px) {
    .servicio--header {
        padding: 20px 15px 0;
    }
    .page--servicio  h1 {
        width: auto;
    }

    .page--servicio h2 {
        width: auto;
    }

    .servicio--header > p {
        width: auto;
    }
    .informational {
        width: 100%;
    }
    .servicio--content {
        width: auto;
        padding: 0 15px;
    }

    .content--otrosServicios {
        width: 100%;
        position: initial;
    }

}

@media only screen and (max-width: 368px) {
    .informational {
        width: 100%;
        flex-direction: column;
    }
    .informational label {
        margin-bottom: 10px;
    }
    .informational label:last-child {
        margin-bottom: 0;
    }
}