.demo-informacion {
    grid-area: demoInformacion;
}

.demo-img {
    grid-area: demoImg;
}

.formulario-demo {
    grid-area: formularioDemo;
}

.demo {
    padding: 7%;
    padding-top: calc(6% + 6rem);
    padding-bottom: 0;
    background-color: var(--color-terciario);
    display: grid;
    grid-template: 
        "demoInformacion demoInformacion demoImformacion formularioDemo formularioDemo"
        "demoImg demoImg demoImg formularioDemo formularioDemo"
        "demoImg demoImg demoImg formularioDemo formularioDemo";
}

.demo-informacion {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1.2rem;
    padding-right: calc(1% + 1rem);
    align-self: flex-end;
}

.informacion-titulo, .completa, .formulario-titulo,
.formulario-descripcion, .formulario-input,
.formulario-input::placeholder, .info {
    font-family: var(--font-syne);
    font-size: var(--font-size-48);
    font-weight: 700;
    font-style: normal;
    color: var(--color-blanco);
}

.formulario-titulo {
    font-size: var(--font-size-26);
    text-align: center;
}

.completa {
    font-size: var(--font-size-20);
}

.demo-img {
    align-self: flex-end;
    justify-self: flex-start;
}

.demo-img img {
    object-fit: contain;
    width: 80%;
    display: block;
}

.forrmulario {
    display: flex;
    justify-content: center;
    align-items: center;
}

.formulario-demo {
    background-color: var(--color-principal);
    border-radius: 3.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    place-self: center;
    max-width: 60rem;
    margin-bottom: auto;
    padding: 5% 6%;
}

.formulario-demo form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: calc(.5vw + 1rem);
}

.formulario-descripcion, .info {
    font-weight: 400;
    font-size: var(--font-size-20);
    text-align: center;
}

.formulario-descripcion {
    max-width: 36ch;
    margin: 0 auto;
}

.formulario-demo hr {
    width: 80%;
    background-color: var(--color-secundario);
    border: none;
    height: .1rem;
    margin: calc(0.2vw + 1rem);
}

.formulario-input {
    padding: 1.5%;
    border: none;
    border-radius: 1rem;
}

.formulario-input:focus {
    outline: none;
}

.formulario-input {
    color: var(--color-texto-negro-principal);
    font-size: var(--font-size-17);
}

.formulario-input::placeholder {
    font-size: var(--font-size-17);
    color: var(--color-gris-secundario);     
}

.formulario-input[type=submit] {
    margin-top: 4%;
    background-color: var(--color-secundario);
    color: var(--color-principal);
    border-radius: 10rem;
    display: inline-flex;
    align-self: center;
    padding: 1.5% 4%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.info {
    font-size: var(--font-size-14);
    min-height: 17px;
}

@media (max-width: 1600px) {
    .formulario-demo {
        max-width: 50rem;
    }
}

@media (max-width: 1110px) {
    .formulario-demo {
        margin-bottom: calc(6% + 3rem);
    }
}

@media (max-width: 780px) {
    .demo {
        grid-template:
            "demoInformacion"
            "formularioDemo"
            "demoImg";
        gap: 4rem;
        justify-items: center;
    }

    .demo-informacion {
        padding: 0;
        text-align: center;
    }

    .formulario-demo {
        margin: 0;
    }

    .demo-img {
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 500px) and (min-width: 1200px) {
    .demo-img {
        width: 100%;
    }
}

@media (max-height: 700px) {
    .formulario-demo {
        margin-bottom: calc(4% + 4rem);
    }

    .demo-img img {
        width: 60%;
    }
}

@media (min-height: 701px) and (min-width: 1450px) {
    .demo-img img {
        width: 70%;
    }
}

@media (min-width: 1451px) {
    .demo {
        grid-template:
        "demoInformacion demoInformacion formularioDemo formularioDemo formularioDemo"
        "demoImg demoImg formularioDemo formularioDemo formularioDemo"
        "demoImg demoImg formularioDemo formularioDemo formularioDemo";
    }

    .completa {
        max-width: 55ch;
    }

    .formulario-demo {
        place-self: flex-start;
        margin: auto 0;
    }
}

/* QUITAR EL FEEDBACK AL DAR CLICK AL ALGUN ELEMENTO */
a, input[type="submit"], [role="button"], div, div[role="button"] {
    -webkit-tap-highlight-color: transparent;
}

a:visited {
    text-decoration: none;
}