.cursiva  {
    /*para formulario solamente*/
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-style: italic;
    font-size: 20px;
}

.negritas {
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 700;
    font-size: 14px;
    margin: 0;
}

.formulario{
    background-image: url('../img_resourses/folder_consulta.png');
    background-size: cover;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center top;
    margin-top: -20vh;
    position: relative;
    padding-top: 300px;
    padding-bottom: 300px;
}

.form-input{
    width: calc(97% - 10px);
    padding-left: 3%;
    padding-bottom: 1%;
    border: 2px solid black;
    border-top: 0px;
}

.form-input-coment{
    resize: none;
    width: calc(97% - 10px);
    padding-left: 3%;
    padding-bottom: 1%;
    border: 2px solid black;
    border-top: 0px;
}

input::placeholder {
    color: #888;
    font-style: italic;
    font-size: 14px;
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    margin-left: 8%;
}

input {
    font-size: 14px;
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
}

/*Cards de contacto*/
.card-container {
    margin-top: -19vh;
    padding: 5vh;
    display: flex;
}

.card {
    background: var(--primary-color);
    clip-path: url(#socials-clip-path);
    padding-bottom: 3%;
    width: calc(100% / 3);
    z-index: 1;
    margin-left: calc(-100% / 6);
    flex: 0 0 auto;
    display: flex;
    position: relative;
    transition: margin-left 0.3s ease;
    transition: all 0.5s ease;

    .icon {
        margin-left: 14%;
        margin-top: 8%;
        color:white;

    }
    .info {
        opacity: 0;
    }
}

.card:first-child {
    margin-left: 0;
}

.active-social {
    transition: all 0.5s ease;
    background: white;
    margin-right: calc(100% / 6);
    scale: 1.1;

    .icon {
        color: var(--tertiary-color);
        margin-left: 18%;
        margin-top: 17%;
        scale: 1.5;
        position: fixed;
    }
    .info {
        opacity: 1;
        transition: opacity 0.3s ease;
        padding-top: 40%;
        padding-left: 20%;
        padding-right: 21%;
    }
}