/*=========================================
    CONTENEDOR PRINCIPAL
=========================================*/

.nuevo-container{

    width:calc(100% - 40px);

    max-width:1100px;

    margin:120px auto 60px;

}

.page-title{

    text-align:center;

    margin-bottom:50px;

}

.page-title span{

    color:var(--primary);

    font-size:14px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:2px;

}

.page-title h1{

    margin-top:10px;

    font-size:42px;

    font-weight:700;

}

.page-title p{

    margin-top:15px;

    color:var(--text-muted);

    font-size:18px;

    max-width:700px;

    margin-left:auto;

    margin-right:auto;

}

/*=========================================
    FORMULARIO
=========================================*/

.project-form{

    display:flex;

    flex-direction:column;

    gap:40px;

}

/*=========================================
    TARJETAS
=========================================*/

.form-card{

    background:var(--bg-card);

    border-radius:18px;

    padding:40px;

    border:1px solid rgba(255,255,255,.05);

    box-shadow:0 12px 35px rgba(0,0,0,.25);

}

.form-card h2{

    margin-bottom:30px;

    display:flex;

    align-items:center;

    gap:12px;

    font-size:24px;

}

.form-card h2 i{

    color:var(--primary);

}
.grid-2{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;

}
.input-group{

    display:flex;

    flex-direction:column;

}

.input-group label{

    margin-bottom:8px;

    font-weight:600;

    color:white;

}

.input-group input,

.input-group select,

.input-group textarea{

    width:100%;

    padding:15px;

    border-radius:12px;

    border:1px solid rgba(255,255,255,.08);

    background:#0d1326;

    color:white;

    font-size:15px;

    transition:.3s;

}
.input-group input:focus,

.input-group select:focus,

.input-group textarea:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 15px rgba(0,242,254,.25);

}
textarea{

    resize:vertical;

    min-height:140px;

}
.input-group small{

    margin-top:8px;

    color:var(--text-muted);

    font-size:13px;

}
/*=========================================
    TECNOLOGÍAS
=========================================*/

.checkbox-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:15px;

}

.checkbox-grid label{

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px;

    background:#0d1326;

    border:1px solid rgba(255,255,255,.05);

    border-radius:12px;

    cursor:pointer;

    transition:.3s;

}

.checkbox-grid label:hover{

    border-color:var(--primary);

    transform:translateY(-3px);

    box-shadow:0 8px 20px rgba(0,242,254,.15);

}

.checkbox-grid input{

    width:18px;

    height:18px;

    accent-color:var(--primary);

}
/*=========================================
    ARCHIVOS
=========================================*/

input[type=file]{

    background:#0d1326;

    padding:18px;

    border-radius:12px;

    border:2px dashed rgba(0,242,254,.25);

    cursor:pointer;

}

input[type=file]:hover{

    border-color:var(--primary);

    background:#101937;

}
/*=========================================
    BOTONES
=========================================*/

.acciones-formulario{

    display:flex;

    justify-content:flex-end;

    gap:20px;

    margin-top:20px;

}
.btn-cancelar{

    padding:15px 28px;

    border-radius:40px;

    text-decoration:none;

    color:white;

    background:#1b2748;

    transition:.3s;

}

.btn-cancelar:hover{

    background:#273964;

}
.btn-publicar{

    padding:15px 35px;

    border:none;

    border-radius:40px;

    cursor:pointer;

    font-size:16px;

    font-weight:bold;

    color:#000;

    background:linear-gradient(
        135deg,
        var(--secondary),
        var(--primary)
    );

    transition:.3s;

}
.btn-publicar:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 25px rgba(0,242,254,.35);

}
.btn-publicar i,
.btn-cancelar i{

    margin-right:8px;

}
/*=========================================
    RESPONSIVE
=========================================*/

@media(max-width:900px){

.grid-2{

    grid-template-columns:1fr;

}

.acciones-formulario{

    flex-direction:column;

}

.btn-publicar,
.btn-cancelar{

    width:100%;

    text-align:center;

}

}