html, body{

    overflow-x: hidden;

    max-width: 100%;

    background-color: white;

}



.contenedorFondoPrins {

    margin-top: 5rem;

    height: 50vh;

    background: black;

    color: var(--white);

    position: relative;

    bottom: 0;

}

.imagenFondoInicial {

    position: absolute;

    background-color: white;

    background-position: center;

    background-size: cover;

    opacity: 1;

    bottom: 0;

    left: 0;

    right: 0;

    top: 0;

    background-image: url(/static/images/contacto.png);

    z-index: 1;

    }



div .container{

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    top: 40%;

    background-color: transparent;

    text-align: center;

    color: white;

    opacity: 1;

    z-index: 2;

}



.solucionesTitulo{

    font-family: var(--normalFont), sans-serif;

    font-size: var(--titleSize);

    font-weight: bold;

    text-decoration: none;

    cursor: default;

    line-height: 30px;

}



.solucionesFrase{

    font-family: var(--normalFont), sans-serif;

    font-weight: var(--light);

    font-size: var(--titleSmallSize);

    cursor: default;

    padding: 0;

}





.despuesDeltítulo{

    display: flex;

    flex-direction: row;

    justify-content: space-evenly;

    margin: 2rem;

    align-items: flex-start;

    margin-top: 4rem;

}



.partesinForma{

    width: 38vw;

}



.textoSinformaContactos{

    font-size: var(--titleSmallSize);

    font-family: var(--textFont), sans-serif;

    padding: 0 2rem 2rem 2rem;

    margin: 0;

    text-align: center;

}



.infoContactos{

    display: flex;

    flex-direction: column;

    text-align: left;

    margin: 0 110px;



}



.filaInfo{

    display: flex;

    flex-direction: row;

    justify-content: flex-start;

    align-items: center;

    align-content: center;

    font-family: var(--textFont);

    font-size: var(--titleSmallSize);

    margin: 10px 0 10px 25px;

    width: 100%;

}



.iconContactos{

    font-size: 50px;

    font-weight: 500;

    color: var(--accentColor);

    margin: 0 20px;

}



.textoInfo{

    padding: 0;

    margin: 0;

}



.parteConForma{

    width: 40vw;

}





.rowContactos{

    height: fit-content;

}



.form__div{

    position: relative;

    height: 48px;

    margin-bottom: 1rem;

    margin-right: 1rem;

}



/*PARTE DEL MENSAJE*/

.form__text, .form__select, .form__input{

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    font-size: 20px;

    border: 1px solid var(--accentColor);

    border-radius: .5rem;

    outline: none;

    padding: 16px;

    background: none;

    z-index: 1;

}



.form__select{

        padding: 0 16px;

    }



/*CUALQUIER OTRO INPUT*/

.form__select, .form__input{

    height: 100%;

}



.form__label{

    position: absolute;

    left: 1rem;

    top: 7px;

    padding: 0 .25rem;

    background-color: #fff;

    color: var(--accentColor);

    font-size: 20px;

    transition: .3s;

}

.form__button{

    width: 50%;

    display: block;

    margin: 30px auto;

    padding: .75rem 2rem;

    outline: none;

    border: none;

    background-color: var(--accentColor);

    color: #fff;

    font-size: 20px;

    border-radius: .5rem;

    cursor: pointer;

    transition: 0.25s ease-in-out;



}

.form__button:hover{

    background-color: var(--mainColor);

    transform: scale(1.03);

}



/*Input focus move up label*/

.form__input:focus + .form__label,.form__text:focus + .form__label,

.form__select:focus + .form__label{

    top: -11px;

    left: 14px;

    color: var(--accentColor);

    font-size: 15px;

    font-weight: 500;

    z-index: 3;

}



/*Input focus sticky top label*/

.form__input:not(:placeholder-shown).form__input:not(:focus)+ .form__label,

.form__text:not(:placeholder-shown).form__text:not(:focus)+ .form__label,

.form__select:not(:placeholder-shown).form__select:not(:focus)+ .form__label{

    top: -11px;

    left: 14px;

    font-size: 15px;

    font-weight: 500;

    z-index: 3;

}



/*Input focus*/

.form__input:focus, .form__select:focus, .form__text:focus{

    border: 2px solid var(--accentColor);

}



.form__check{

    margin-top: 150px;

    display: flex;

    flex-direction: row;

    align-items: center;

}



.form-check-label{

    font-family: var(--textFont), sans-serif;

    font-size: var(--textSize);

}



.disclaimer{

    margin: 0 50px;

    font-family: var(--textFont), sans-serif;

    font-size: 13px;

    text-align: center;

}



.form-check-input[type=checkbox] {

    -webkit-appearance: none;

    appearance: none;

    background-color: white;

    margin: 13px;

    font: inherit;

    color: currentColor;



    border: 0.15em solid var(--accentColor);

    border-radius: 0.15em;

    transform: translateY(-0.075em);

}



.form-check-input[type=checkbox] {

    display: grid;

  place-content: center;

}



.form-check-input[type=checkbox]::before {

  content: "";

  width: 0.65em;

  height: 0.65em;

  transform: scale(0);

  transition: 120ms transform ease-in-out;

  box-shadow: inset 1em 1em var(--mainColor);

}



.form-check-input[type=checkbox]:checked::before {

  transform: scale(1);

}



.form-check-input[type=checkbox]::before {

    transform-origin: bottom left;

    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);

}



.form-check-input[type=checkbox]:focus {

  outline: max(2px, 0.15em) solid var(--accentColor);

  outline-offset: max(2px, 0.15em);

}





/*PANTALLAS 4K*/

@media (min-width: 2000px) {



    .solucionesTitulo{

        font-family: var(--normalFont), sans-serif;

        font-size: var(--titleMegaSize);

        font-weight: bold;

        text-decoration: none;

        cursor: default;

        line-height: 50px;

        margin: 0;

    }



    .solucionesFrase{

        font-family: var(--normalFont), sans-serif;

        font-weight: var(--light);

        font-size: var(--titleMediumSize);

        cursor: default;

        padding: 0;

    }



    .despuesDeltítulo{

        display: flex;

        flex-direction: row;

        justify-content: center;

        margin:  50px 30px 20px 30px;

        align-items: center;

    }



    .partesinForma{

        width: 50vw;

        display: flex;

        flex-direction: column;

        justify-content: center;

        margin:  10px 20px 20px 20px;

        align-items: center;

    }



    .infoContactos{

        display: flex;

        flex-direction: column;

        text-align: center;

        justify-content: center;

        margin: 0 0 20px 0;



    }



    .textoSinformaContactos{

        font-size: var(--titleMediumSize);

        font-family: var(--textFont), sans-serif;

        padding: 0 2rem 2rem 0;

        margin: 0;

        text-align: center;

        width: 40vw;

    }







    .filaInfo{

        width: fit-content;

        display: flex;

        flex-direction: row;

        justify-content: flex-start;

        align-items: center;

        align-content: center;

        font-family: var(--textFont);

        font-size: var(--titleMediumSize);

        margin: 10px 0;

    }





    .textoInfo{

        padding: 0;

        margin: 0;

    }



    .parteConForma{

        width: 30vw;

        margin-left: 20px;

    }



    .form__div{

        position: relative;

        height: 75px;

        margin-bottom: 1rem;

        margin-right: 1rem;

    }



    /*PARTE DEL MENSAJE*/

    .form__text, .form__select, .form__input{

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        font-size: var(--titleSmallSize);

        border: 1px solid var(--accentColor);

        border-radius: 15px;

        outline: none;

        padding: 16px;

        background: none;

        z-index: 1;

    }



    .form__select{

        padding: 0 16px;

    }



    /*CUALQUIER OTRO INPUT*/

    .form__select, .form__input{

        height: 100%;

    }



    .form__label{

        position: absolute;

        left: 1rem;

        top: 18px;

        padding: 0 .25rem;

        background-color: #fff;

        color: var(--accentColor);

        font-size: var(--titleSmallSize);

        transition: .3s;

    }

    .form__button{

        width: 80%;

        display: block;

        margin: 20px auto 0 auto;

        padding: .75rem 2rem;

        outline: none;

        border: none;

        background-color: var(--accentColor);

        color: #fff;

        font-size: var(--titleSmallSize);

        border-radius: .5rem;

        cursor: pointer;

        transition: 0.25s ease-in-out;



    }

    .form__button:hover{

        background-color: var(--mainColor);

        transform: scale(1.03);

    }



    /*Input focus move up label*/

    .form__input:focus + .form__label,.form__text:focus + .form__label,

    .form__select:focus + .form__label{

        top: -10px;

        left: 14px;

        color: var(--accentColor);

        font-size: 20px;

        font-weight: 500;

        z-index: 3;

    }



    /*Input focus sticky top label*/

    .form__input:not(:placeholder-shown).form__input:not(:focus)+ .form__label,

    .form__text:not(:placeholder-shown).form__text:not(:focus)+ .form__label,

    .form__select:not(:placeholder-shown).form__select:not(:focus)+ .form__label{

        top: -10px;

        left: 14px;

        font-size: 20px;

        font-weight: 500;

        z-index: 3;

    }



    /*Input focus*/

    .form__input:focus, .form__select:focus, .form__text:focus{

        border: 2px solid var(--accentColor);

    }



}



/*PANTALLAS GRANDES*/

@media (max-width: 1800px) {



    .solucionesTitulo{

        font-family: var(--normalFont), sans-serif;

        font-size: var(--titleMegaSize);

        font-weight: bold;

        text-decoration: none;

        cursor: default;

        line-height: 45px;

        margin: 0;

    }



    .solucionesFrase{

        font-family: var(--normalFont), sans-serif;

        font-weight: var(--light);

        font-size: var(--titleSmallSize);

        cursor: default;

        padding: 0;

    }



    .despuesDeltítulo{

        display: flex;

        flex-direction: row;

        justify-content: center;

        margin:  50px 30px 20px 30px;

        align-items: center;

    }



    .partesinForma{

        width: 40vw;

        display: flex;

        flex-direction: column;

        justify-content: center;

        margin:  10px 20px 20px 20px;

        align-items: center;

    }



    .infoContactos{

        display: flex;

        flex-direction: column;

        text-align: center;

        justify-content: center;

        margin: 0 0 20px 0;



    }



    .textoSinformaContactos{

        font-size: var(--titleMiniSize);

        font-family: var(--textFont), sans-serif;

        padding: 0 2rem 2rem 2rem;

        margin: 0;

        text-align: center;

        width: 40vw;

    }



    .iconContactos {

        font-size: 50px;

        font-weight: 500;

        color: var(--accentColor);

        margin: 0 20px 0 0;

    }



    .filaInfo{

        width: fit-content;

        display: flex;

        flex-direction: row;

        justify-content: flex-start;

        align-items: center;

        align-content: center;

        font-family: var(--textFont);

        font-size: var(--titleMiniSize);

        margin: 10px 0;

        text-align: left;

    }





    .textoInfo{

        padding: 0;

        margin: 0;

    }



    .parteConForma{

        width: 80vw;

        margin-left: 20px;

    }



    .form__div{

        position: relative;

        height: 48px;

        margin-bottom: 1rem;

        margin-right: 1rem;

    }



    /*PARTE DEL MENSAJE*/

    .form__text, .form__select, .form__input{

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        font-size: 18px;

        border: 1px solid var(--accentColor);

        border-radius: .5rem;

        outline: none;

        padding: 16px;

        background: none;

        z-index: 1;

    }



    .form__select{

        padding: 0 16px;

    }



    /*CUALQUIER OTRO INPUT*/

    .form__select, .form__input{

        height: 100%;

    }



    .form__label{

        position: absolute;

        left: 1rem;

        top: 9px;

        padding: 0 .25rem;

        background-color: #fff;

        color: var(--accentColor);

        font-size: 18px;

        transition: .3s;

    }

    .form__button{

        width: 80%;

        display: block;

        margin: 20px auto 0 auto;

        padding: .75rem 2rem;

        outline: none;

        border: none;

        background-color: var(--accentColor);

        color: #fff;

        font-size: 18px;

        border-radius: .5rem;

        cursor: pointer;

        transition: 0.25s ease-in-out;



    }

    .form__button:hover{

        background-color: var(--mainColor);

        transform: scale(1.03);

    }



    /*Input focus move up label*/

    .form__input:focus + .form__label,.form__text:focus + .form__label,

    .form__select:focus + .form__label{

        top: -10px;

        left: 14px;

        color: var(--accentColor);

        font-size: 15px;

        font-weight: 500;

        z-index: 3;

    }



    /*Input focus sticky top label*/

    .form__input:not(:placeholder-shown).form__input:not(:focus)+ .form__label,

    .form__text:not(:placeholder-shown).form__text:not(:focus)+ .form__label,

    .form__select:not(:placeholder-shown).form__select:not(:focus)+ .form__label{

        top: -10px;

        left: 14px;

        font-size: 15px;

        font-weight: 500;

        z-index: 3;

    }



    /*Input focus*/

    .form__input:focus, .form__select:focus, .form__text:focus{

        border: 2px solid var(--accentColor);

    }



}



/*PANTALLAS LAPTOP GRANDES*/

@media (max-width: 1440px) {



    .solucionesTitulo{

        font-family: var(--normalFont), sans-serif;

        font-size: var(--titleMegaSize);

        font-weight: bold;

        text-decoration: none;

        cursor: default;

        line-height: 45px;

        margin: 0;

    }



    .solucionesFrase{

        font-family: var(--normalFont), sans-serif;

        font-weight: var(--light);

        font-size: var(--titleSmallSize);

        cursor: default;

        padding: 0;

    }



    .despuesDeltítulo{

        display: flex;

        flex-direction: row;

        justify-content: center;

        margin:  50px 30px 20px 30px;

        align-items: center;

    }



    .partesinForma{

        width: 40vw;

        display: flex;

        flex-direction: column;

        justify-content: center;

        margin:  10px 20px 20px 20px;

        align-items: center;

    }



    .infoContactos{

        display: flex;

        flex-direction: column;

        text-align: center;

        justify-content: center;

        margin: 0 0 20px 0;



    }



    .textoSinformaContactos{

        font-size: var(--titleSmallSize);

        font-family: var(--textFont), sans-serif;

        padding: 0 2rem 2rem 0;

        margin: 0;

        text-align: center;

        width: 40vw;

    }







    .filaInfo{

        width: fit-content;

        display: flex;

        flex-direction: row;

        justify-content: flex-start;

        align-items: center;

        align-content: center;

        font-family: var(--textFont);

        font-size: var(--titleSmallSize);

        margin: 10px 0;

    }





    .textoInfo{

        padding: 0;

        margin: 0;

    }



    .parteConForma{

        width: 80vw;

        margin-left: 20px;

    }



    .form__div{

        position: relative;

        height: 48px;

        margin-bottom: 1rem;

        margin-right: 1rem;

    }



    /*PARTE DEL MENSAJE*/

    .form__text, .form__select, .form__input{

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        font-size: 18px;

        border: 1px solid var(--accentColor);

        border-radius: .5rem;

        outline: none;

        padding: 16px;

        background: none;

        z-index: 1;

    }



    .form__select{

        padding: 0 16px;

    }



    /*CUALQUIER OTRO INPUT*/

    .form__select, .form__input{

        height: 100%;

    }



    .form__label{

        position: absolute;

        left: 1rem;

        top: 9px;

        padding: 0 .25rem;

        background-color: #fff;

        color: var(--accentColor);

        font-size: 18px;

        transition: .3s;

    }

    .form__button{

        width: 80%;

        display: block;

        margin: 20px auto 0 auto;

        padding: .75rem 2rem;

        outline: none;

        border: none;

        background-color: var(--accentColor);

        color: #fff;

        font-size: 18px;

        border-radius: .5rem;

        cursor: pointer;

        transition: 0.25s ease-in-out;



    }

    .form__button:hover{

        background-color: var(--mainColor);

        transform: scale(1.03);

    }



    /*Input focus move up label*/

    .form__input:focus + .form__label,.form__text:focus + .form__label,

    .form__select:focus + .form__label{

        top: -10px;

        left: 14px;

        color: var(--accentColor);

        font-size: 15px;

        font-weight: 500;

        z-index: 3;

    }



    /*Input focus sticky top label*/

    .form__input:not(:placeholder-shown).form__input:not(:focus)+ .form__label,

    .form__text:not(:placeholder-shown).form__text:not(:focus)+ .form__label,

    .form__select:not(:placeholder-shown).form__select:not(:focus)+ .form__label{

        top: -10px;

        left: 14px;

        font-size: 15px;

        font-weight: 500;

        z-index: 3;

    }



    /*Input focus*/

    .form__input:focus, .form__select:focus, .form__text:focus{

        border: 2px solid var(--accentColor);

    }



}



/*IPAD AIR HORIZONTAL*/

@media (max-width: 1200px) {



    .solucionesTitulo{

        font-family: var(--normalFont), sans-serif;

        font-size: var(--titleMegaSize);

        font-weight: bold;

        text-decoration: none;

        cursor: default;

        line-height: 45px;

        margin: 0;

    }



    .solucionesFrase{

        font-family: var(--normalFont), sans-serif;

        font-weight: var(--light);

        font-size: var(--titleSmallSize);

        cursor: default;

        padding: 0;

    }



    .despuesDeltítulo{

        display: flex;

        flex-direction: row;

        justify-content: center;

        margin:  50px 30px 20px 30px;

        align-items: center;

    }



    .partesinForma{

        width: 40vw;

        display: flex;

        flex-direction: column;

        justify-content: center;

        margin:  10px 20px 20px 20px;

        align-items: center;

    }



    .infoContactos{

        display: flex;

        flex-direction: column;

        text-align: center;

        justify-content: center;

        margin: 0 0 20px 0;



    }



    .textoSinformaContactos{

        font-size: var(--textSize);

        font-family: var(--textFont), sans-serif;

        padding: 0 2rem 2rem 2rem;

        margin: 0;

        text-align: center;

        width: 40vw;

    }



    .iconContactos {

        font-size: 50px;

        font-weight: 500;

        color: var(--accentColor);

        margin: 0 20px 0 0;

    }



    .filaInfo{

        width: fit-content;

        display: flex;

        flex-direction: row;

        justify-content: flex-start;

        align-items: center;

        align-content: center;

        font-family: var(--textFont);

        font-size: var(--textSize);

        margin: 10px 0;

    }





    .textoInfo{

        padding: 0;

        margin: 0;

    }



    .parteConForma{

        width: 80vw;

        margin-left: 20px;

    }



    .form__div{

        position: relative;

        height: 48px;

        margin-bottom: 1rem;

        margin-right: 1rem;

    }



    /*PARTE DEL MENSAJE*/

    .form__text, .form__select, .form__input{

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        font-size: 18px;

        border: 1px solid var(--accentColor);

        border-radius: .5rem;

        outline: none;

        padding: 16px;

        background: none;

        z-index: 1;

    }



    .form__select{

        padding: 0 16px;

    }



    /*CUALQUIER OTRO INPUT*/

    .form__select, .form__input{

        height: 100%;

    }



    .form__label{

        position: absolute;

        left: 1rem;

        top: 9px;

        padding: 0 .25rem;

        background-color: #fff;

        color: var(--accentColor);

        font-size: 18px;

        transition: .3s;

    }

    .form__button{

        width: 80%;

        display: block;

        margin: 20px auto 0 auto;

        padding: .75rem 2rem;

        outline: none;

        border: none;

        background-color: var(--accentColor);

        color: #fff;

        font-size: 18px;

        border-radius: .5rem;

        cursor: pointer;

        transition: 0.25s ease-in-out;



    }

    .form__button:hover{

        background-color: var(--mainColor);

        transform: scale(1.03);

    }



    /*Input focus move up label*/

    .form__input:focus + .form__label,.form__text:focus + .form__label,

    .form__select:focus + .form__label{

        top: -10px;

        left: 14px;

        color: var(--accentColor);

        font-size: 15px;

        font-weight: 500;

        z-index: 3;

    }



    /*Input focus sticky top label*/

    .form__input:not(:placeholder-shown).form__input:not(:focus)+ .form__label,

    .form__text:not(:placeholder-shown).form__text:not(:focus)+ .form__label,

    .form__select:not(:placeholder-shown).form__select:not(:focus)+ .form__label{

        top: -10px;

        left: 14px;

        font-size: 15px;

        font-weight: 500;

        z-index: 3;

    }



    /*Input focus*/

    .form__input:focus, .form__select:focus, .form__text:focus{

        border: 2px solid var(--accentColor);

    }



}



/*PANTALLAS NORMALES Y IPAD MINI HORIZONTAL*/

@media (max-width: 1024px) {



    .solucionesTitulo{

        font-family: var(--normalFont), sans-serif;

        font-size: var(--titleSize);

        font-weight: bold;

        text-decoration: none;

        cursor: default;

        line-height: 42px;

        margin: 0;

    }



    .solucionesFrase{

        font-family: var(--normalFont), sans-serif;

        font-weight: var(--light);

        font-size: var(--titleSmallSize);

        cursor: default;

        padding: 0;

    }



    .despuesDeltítulo{

        display: flex;

        flex-direction: row;

        justify-content: center;

        margin:  50px 20px 20px 20px;

        align-items: center;

    }



    .partesinForma{

        width: 40vw;

        display: flex;

        flex-direction: column;

        justify-content: center;

        margin:  10px 20px 20px 20px;

        align-items: center;

    }



    .infoContactos{

        width: 40vw;

        display: flex;

        flex-direction: column;

        text-align: center;

        justify-content: center;

        margin: 0 0 20px 0;



    }



    .iconContactos {

        font-size: 50px;

        font-weight: 500;

        color: var(--accentColor);

        margin: 0 20px 0 0;

    }



    .textoSinformaContactos{

        font-size: var(--titleMiniSize);

        font-family: var(--textFont), sans-serif;

        padding: 0 2rem 2rem 2rem;

        margin: 0;

        text-align: center;

        width: 40vw;

    }







    .filaInfo{

        display: flex;

        flex-direction: row;

        justify-content: center;

        align-items: center;

        align-content: center;

        font-family: var(--textFont);

        font-size: var(--titleMiniSize);

        margin: 10px 0;

    }



    .textoInfo{

        padding: 0;

        margin: 0;

    }



    .parteConForma{

        width: 80vw;

        margin-left: 20px;

    }



    .form__div{

        position: relative;

        height: 48px;

        margin-bottom: 1rem;

        margin-right: 1rem;

    }



    /*PARTE DEL MENSAJE*/

    .form__text, .form__select, .form__input{

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        font-size: 15px;

        border: 1px solid var(--accentColor);

        border-radius: .5rem;

        outline: none;

        padding: 16px;

        background: none;

        z-index: 1;

    }



    .form__select{

        padding: 0 16px;

    }



    /*CUALQUIER OTRO INPUT*/

    .form__select, .form__input{

        height: 100%;

    }



    .form__label{

        position: absolute;

        left: 1rem;

        top: 11px;

        padding: 0 .25rem;

        background-color: #fff;

        color: var(--accentColor);

        font-size: 16px;

        transition: .3s;

    }

    .form__button{

        width: 80%;

        display: block;

        margin: 120px auto 0 auto;

        padding: .75rem 2rem;

        outline: none;

        border: none;

        background-color: var(--accentColor);

        color: #fff;

        font-size: 15px;

        border-radius: .5rem;

        cursor: pointer;

        transition: 0.25s ease-in-out;



    }

    .form__button:hover{

        background-color: var(--mainColor);

        transform: scale(1.03);

    }



    /*Input focus move up label*/

    .form__input:focus + .form__label,.form__text:focus + .form__label,

    .form__select:focus + .form__label{

        top: -10px;

        left: 14px;

        color: var(--accentColor);

        font-size: 13px;

        font-weight: 500;

        z-index: 3;

    }



    /*Input focus sticky top label*/

    .form__input:not(:placeholder-shown).form__input:not(:focus)+ .form__label,

    .form__text:not(:placeholder-shown).form__text:not(:focus)+ .form__label,

    .form__select:not(:placeholder-shown).form__select:not(:focus)+ .form__label{

        top: -10px;

        left: 14px;

        font-size: 13px;

        font-weight: 500;

        z-index: 3;

    }



    /*Input focus*/

    .form__input:focus, .form__select:focus, .form__text:focus{

        border: 2px solid var(--accentColor);

    }



}



/*TABLETS GRANDES VERTICAL*/

@media (max-width: 991px) {

    .solucionesTitulo{

        font-family: var(--normalFont), sans-serif;

        font-size: var(--titleSize);

        font-weight: bold;

        text-decoration: none;

        cursor: default;

        line-height: 42px;

        margin: 0;

    }



    .solucionesFrase{

        font-family: var(--normalFont), sans-serif;

        font-weight: var(--light);

        font-size: var(--titleSmallSize);

        cursor: default;

        padding: 0;

    }



    .despuesDeltítulo{

        display: flex;

        flex-direction: column;

        justify-content: center;

        margin:  20px 20px 20px 20px;

        align-items: center;

    }



    .partesinForma{

        width: 100vw;

        display: flex;

        flex-direction: row;

        justify-content: flex-start;

        margin:  10px 20px 20px 15vw;

        align-items: center;

    }



    .textoSinformaContactos{

        font-size: var(--titleMiniSize);

        font-family: var(--textFont), sans-serif;

        padding: 0;

        margin: 5vw 5vw 5vw 2vw;

        text-align: center;

        width: 35vw;

    }



    .infoContactos{

        width: 40vw;

        display: flex;

        flex-direction: column;

        text-align: center;

        margin: 0 ;

    }



    .filaInfo{

        display: flex;

        flex-direction: row;

        justify-content: flex-start;

        align-items: center;

        align-content: center;

        font-family: var(--textFont);

        font-size: var(--titleMiniSize);

        margin: 10px 0;

    }



    .iconContactos{

        font-size: 40px;

        font-weight: 500;

        color: var(--accentColor);

        margin: 0 20px 0 0;

    }



    .textoInfo{

        padding: 0;

        margin: 0;

        text-align: left;

    }



    .parteConForma{

        width: 80vw;

        margin-left: 20px;

    }



    .form__div{

        position: relative;

        height: 48px;

        margin-bottom: 1rem;

        margin-right: 1rem;

    }



    /*PARTE DEL MENSAJE*/

    .form__text, .form__select, .form__input{

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        font-size: 20px;

        border: 1px solid var(--accentColor);

        border-radius: .5rem;

        outline: none;

        padding: 16px;

        background: none;

        z-index: 1;

    }



    .form__select{

        padding: 0 16px;

    }



    /*CUALQUIER OTRO INPUT*/

    .form__select, .form__input{

        height: 100%;

    }



    .form__label{

        position: absolute;

        left: 1rem;

        top: 7px;

        padding: 0 .25rem;

        background-color: #fff;

        color: var(--accentColor);

        font-size: 20px;

        transition: .3s;

    }

    .form__button{

        width: 80%;

        display: block;

        margin: 20px auto 0 auto;

        padding: .75rem 2rem;

        outline: none;

        border: none;

        background-color: var(--accentColor);

        color: #fff;

        font-size: 20px;

        border-radius: .5rem;

        cursor: pointer;

        transition: 0.25s ease-in-out;



    }

    .form__button:hover{

        background-color: var(--mainColor);

        transform: scale(1.03);

    }



    /*Input focus move up label*/

    .form__input:focus + .form__label,.form__text:focus + .form__label,

    .form__select:focus + .form__label{

        top: -10px;

        left: 14px;

        color: var(--accentColor);

        font-size: 15px;

        font-weight: 500;

        z-index: 3;

    }



    /*Input focus sticky top label*/

    .form__input:not(:placeholder-shown).form__input:not(:focus)+ .form__label,

    .form__text:not(:placeholder-shown).form__text:not(:focus)+ .form__label,

    .form__select:not(:placeholder-shown).form__select:not(:focus)+ .form__label{

        top: -10px;

        left: 14px;

        font-size: 15px;

        font-weight: 500;

        z-index: 3;

    }



    /*Input focus*/

    .form__input:focus, .form__select:focus, .form__text:focus{

        border: 2px solid var(--accentColor);

    }

}



/*TABLETS NORMALES*/

@media (max-width: 768px) {

    .solucionesTitulo{

        font-family: var(--normalFont), sans-serif;

        font-size: var(--titleSize);

        font-weight: bold;

        text-decoration: none;

        cursor: default;

        line-height: 42px;

        margin: 0;

    }



    .solucionesFrase{

        font-family: var(--normalFont), sans-serif;

        font-weight: var(--light);

        font-size: var(--titleSmallSize);

        cursor: default;

        padding: 0;

    }



    .despuesDeltítulo{

        display: flex;

        flex-direction: column;

        justify-content: center;

        margin:  20px 20px 20px 20px;

        align-items: center;

    }



    .partesinForma{

        width: 100vw;

        display: flex;

        flex-direction: row;

        justify-content: flex-start;

        margin:  10px 20px 20px 20px;

        align-items: center;

    }



    .textoSinformaContactos{

        font-size: var(--titleMiniSize);

        font-family: var(--textFont), sans-serif;

        padding: 0;

        margin: 3vw 6vw;

        text-align: center;

        width: 30vw;

    }



    .infoContactos{

        width: 40vw;

        display: flex;

        flex-direction: column;

        text-align: center;

        margin: 0 0 50px 0;

    }



    .filaInfo{

        display: flex;

        flex-direction: row;

        justify-content: flex-start;

        align-items: center;

        align-content: center;

        font-family: var(--textFont);

        font-size: var(--titleMiniSize);

        margin: 10px 0;

    }



    .iconContactos{

        font-size: 40px;

        font-weight: 500;

        color: var(--accentColor);

        margin: 0 20px 0 0;

    }



    .textoInfo{

        padding: 0;

        margin: 0;

        text-align: left;

    }



    .parteConForma{

        width: 80vw;

        margin-left: 20px;

    }



    .form__div{

        position: relative;

        height: 48px;

        margin-bottom: 1rem;

        margin-right: 1rem;

    }



    /*PARTE DEL MENSAJE*/

    .form__text, .form__select, .form__input{

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        font-size: 18px;

        border: 1px solid var(--accentColor);

        border-radius: .5rem;

        outline: none;

        padding: 16px;

        background: none;

        z-index: 1;

    }



    .form__select{

        padding: 0 16px;

    }



    /*CUALQUIER OTRO INPUT*/

    .form__select, .form__input{

        height: 100%;

    }



    .form__label{

        position: absolute;

        left: 1rem;

        top: 10px;

        padding: 0 .25rem;

        background-color: #fff;

        color: var(--accentColor);

        font-size: 18px;

        transition: .3s;

    }

    .form__button{

        width: 80%;

        display: block;

        margin: 120px auto 0 auto;

        padding: .75rem 2rem;

        outline: none;

        border: none;

        background-color: var(--accentColor);

        color: #fff;

        font-size: 18px;

        border-radius: .5rem;

        cursor: pointer;

        transition: 0.25s ease-in-out;



    }

    .form__button:hover{

        background-color: var(--mainColor);

        transform: scale(1.03);

    }



    /*Input focus move up label*/

    .form__input:focus + .form__label,.form__text:focus + .form__label,

    .form__select:focus + .form__label{

        top: -10px;

        left: 14px;

        color: var(--accentColor);

        font-size: 13px;

        font-weight: 500;

        z-index: 3;

    }



    /*Input focus sticky top label*/

    .form__input:not(:placeholder-shown).form__input:not(:focus)+ .form__label,

    .form__text:not(:placeholder-shown).form__text:not(:focus)+ .form__label,

    .form__select:not(:placeholder-shown).form__select:not(:focus)+ .form__label{

        top: -10px;

        left: 14px;

        font-size: 13px;

        font-weight: 500;

        z-index: 3;

    }



    /*Input focus*/

    .form__input:focus, .form__select:focus, .form__text:focus{

        border: 2px solid var(--accentColor);

    }

}



/*CELULARES*/

@media (max-width: 480px) {



    .solucionesTitulo{

        font-family: var(--normalFont), sans-serif;

        font-size: var(--titleMediumSize);

        font-weight: bold;

        text-decoration: none;

        cursor: default;

        line-height: 35px;

        margin: 0;

    }



    .solucionesFrase{

        font-family: var(--normalFont), sans-serif;

        font-weight: var(--light);

        font-size: var(--titleMiniSize);

        cursor: default;

        padding: 0;

    }



    .despuesDeltítulo{

        display: flex;

        flex-direction: column;

        justify-content: center;

        margin:  50px 20px 20px 20px;

        align-items: center;

    }



    .iconContactos{

        font-size: 40px;

        font-weight: 500;

        color: var(--accentColor);

        margin: 0 20px 0 0;

    }



    .partesinForma{

        width: 100vw;

        display: flex;

        flex-direction: column;

        justify-content: center;

        margin:  10px 20px 20px 20px;

        align-items: center;

    }





    .infoContactos{

        width: fit-content;

        display: flex;

        flex-direction: column;

        text-align: center;

        justify-content: center;

        margin: 0 auto 20px ;



    }



    .textoSinformaContactos{

        font-size: var(--titleTinySize);

        font-family: var(--textFont), sans-serif;

        padding: 0 2rem 2rem 2rem;

        margin: 0;

        text-align: center;

        width: 100vw;

    }







    .filaInfo{

        display: flex;

        flex-direction: row;

        justify-content: center;

        align-items: center;

        align-content: center;

        font-family: var(--textFont);

        font-size: var(--titleTinySize);

        margin: 10px 0;

        width: 100vw;

    }



    .textoInfo{

        padding: 0;

        margin: 0;

    }



    .parteConForma{

        width: 80vw;

        margin-left: 20px;

    }



    .form__div{

        position: relative;

        height: 48px;

        margin-bottom: 1rem;

        margin-right: 1rem;

    }



    /*PARTE DEL MENSAJE*/

    .form__text, .form__select, .form__input{

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        font-size: 15px;

        border: 1px solid var(--accentColor);

        border-radius: .5rem;

        outline: none;

        padding: 16px;

        background: none;

        z-index: 1;

    }



    .form__select{

        padding: 0 16px;

    }



    /*CUALQUIER OTRO INPUT*/

    .form__select, .form__input{

        height: 100%;

    }



    .form__label{

        position: absolute;

        left: 1rem;

        top: 11px;

        padding: 0 .25rem;

        background-color: #fff;

        color: var(--accentColor);

        font-size: 16px;

        transition: .3s;

    }

    .form__button{

        width: 80%;

        display: block;

        margin: 120px auto 0 auto;

        padding: .75rem 2rem;

        outline: none;

        border: none;

        background-color: var(--accentColor);

        color: #fff;

        font-size: 15px;

        border-radius: .5rem;

        cursor: pointer;

        transition: 0.25s ease-in-out;



    }

    .form__button:hover{

        background-color: var(--mainColor);

        transform: scale(1.03);

    }



    /*Input focus move up label*/

    .form__input:focus + .form__label,.form__text:focus + .form__label,

    .form__select:focus + .form__label{

        top: -10px;

        left: 14px;

        color: var(--accentColor);

        font-size: 13px;

        font-weight: 500;

        z-index: 3;

    }



    /*Input focus sticky top label*/

    .form__input:not(:placeholder-shown).form__input:not(:focus)+ .form__label,

    .form__text:not(:placeholder-shown).form__text:not(:focus)+ .form__label,

    .form__select:not(:placeholder-shown).form__select:not(:focus)+ .form__label{

        top: -10px;

        left: 14px;

        font-size: 13px;

        font-weight: 500;

        z-index: 3;

    }



    /*Input focus*/

    .form__input:focus, .form__select:focus, .form__text:focus{

        border: 2px solid var(--accentColor);

    }



}