/* =========================================================
   UNOSKREATIVOS
   CONTACTO / FORMULARIO
   ========================================================= */

.contact-layout{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:60px;
    align-items:start;
}

.contact-copy{
    position:sticky;
    top:30px;
}

.form{
    border:1px solid var(--line);
    background:linear-gradient(160deg,#151515,#0a0a0a);
    padding:35px;
}

.grid-form{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.field{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.field.full{
    grid-column:1 / -1;
}

.field label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:1.2px;
    color:#a0a0a0;
    font-weight:800;
}

.field input,
.field select,
.field textarea{
    width:100%;
    background:#0a0a0a;
    color:white;
    border:1px solid #333;
    padding:15px 14px;
    outline:none;
    font-family:inherit;
    font-size:14px;
}

.field textarea{
    resize:vertical;
    min-height:140px;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
    border-color:var(--accent);
}

.form-submit{
    width:100%;
    min-height:62px;
    background:var(--green);
    color:white;
    border:0;
    font-size:13px;
    font-weight:950;
    letter-spacing:1px;
    text-transform:uppercase;
    cursor:pointer;
    margin-top:22px;
}

.form-note{
    text-align:center;
    color:#777;
    font-size:11px;
    margin-top:12px;
    line-height:1.5;
}

/* =========================================================
   RESPONSIVE — CONTACTO
   ========================================================= */

@media (max-width: 820px) {

    .contact-layout {
        grid-template-columns: 1fr;
    }

    .contact-copy {
        position: static;
    }

    .grid-form {
        grid-template-columns: 1fr;
    }

    .field.full {
        grid-column: auto;
    }

    .form {
        padding: 22px;
    }

}

/* =========================================================
   ARMONÍA DE MARCA — FORMULARIO
   ========================================================= */

.field input:focus,
.field select:focus,
.field textarea:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(204,255,0,.15);
}

.form-submit{
    background:var(--accent);
    color:#000;
    box-shadow:0 10px 28px rgba(204,255,0,.15);
    transition:transform .2s ease,box-shadow .2s ease;
}

.form-submit:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 36px rgba(204,255,0,.25);
}