/* ==========================================
   FORMULARIO HOME NOPAL - CONTACT FORM 7
========================================== */

.nopal-form{
    width:100%;
    font-family:"Public Sans", sans-serif;
    color:#4C4B4B;
}

/* Grid */
.nopal-form-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    column-gap:clamp(50px, 9vw, 150px);
    row-gap:28px;
}

/* Campo completo */
.nopal-form-field--full{
    grid-column:1 / -1;
}

/* Contenedores CF7 */
.nopal-form .wpcf7-form-control-wrap{
    display:block;
    width:100%;
}

/* Inputs y textarea */
.nopal-form input[type="text"],
.nopal-form input[type="email"],
.nopal-form input[type="tel"],
.nopal-form textarea{
    width:100%;
    height:38px;
    margin:0;
    padding:0 0 6px;

    border:0;
    border-bottom:1px solid #8C8C8C;
    border-radius:0;

    background:transparent;
    box-shadow:none;

    font-family:"Public Sans", sans-serif;
    font-size:21px;
    line-height:1.2;
    font-weight:300;
    color:#4C4B4B;

    outline:none;
    resize:none;

    transition:border-color .25s ease;
}

/* Textarea */
.nopal-form textarea{
    min-height:38px;
    overflow:hidden;
}

/* Placeholder */
.nopal-form input::placeholder,
.nopal-form textarea::placeholder{
    color:#4C4B4B;
    opacity:1;
}

/* Focus */
.nopal-form input[type="text"]:focus,
.nopal-form input[type="email"]:focus,
.nopal-form input[type="tel"]:focus,
.nopal-form textarea:focus{
    border-bottom-color:#2F2F2F;
}

/* Aceptación */
.nopal-form-aceptacion{
    margin-top:48px;
}

.nopal-form-aceptacion .wpcf7-list-item{
    margin:0;
}

.nopal-form-aceptacion label{
    display:flex;
    align-items:center;
    gap:9px;

    font-family:"Public Sans", sans-serif;
    font-size:15px;
    font-weight:300;
    color:#4C4B4B;
}

/* Checkbox */
.nopal-form-aceptacion input[type="checkbox"]{
    width:11px;
    height:11px;
    margin:0;

    appearance:none;
    -webkit-appearance:none;

    border:1px solid #4C4B4B;
    border-radius:0;
    background:#FFFFFF;

    cursor:pointer;
}

.nopal-form-aceptacion input[type="checkbox"]:checked{
    background:#4C4B4B;
    box-shadow:inset 0 0 0 2px #FFFFFF;
}

/* Botón */
.nopal-form-submit{
    margin-top:28px;
}

.nopal-form input[type="submit"]{
    min-width:74px;
    padding:7px 14px;

    border:0;
    border-radius:0;

    background:#555555;
    color:#FFFFFF;

    font-family:"Public Sans", sans-serif;
    font-size:13px;
    line-height:1;
    font-weight:600;

    cursor:pointer;

    transition:
        background-color .25s ease,
        color .25s ease;
}

.nopal-form input[type="submit"]:hover,
.nopal-form input[type="submit"]:focus{
    background:#2F2F2F;
    color:#FFFFFF;
}

/* Spinner */
.nopal-form .wpcf7-spinner{
    margin:0 0 0 10px;
}

/* Mensajes */
.nopal-form .wpcf7-not-valid-tip{
    margin-top:6px;

    font-family:"Public Sans", sans-serif;
    font-size:12px;
}

.nopal-form .wpcf7-response-output{
    margin:24px 0 0 !important;
    padding:12px 14px !important;

    font-family:"Public Sans", sans-serif;
    font-size:13px;
}

/* Tablet */
@media (max-width:1024px){

    .nopal-form-grid{
        column-gap:50px;
    }

    .nopal-form input[type="text"],
    .nopal-form input[type="email"],
    .nopal-form input[type="tel"],
    .nopal-form textarea{
        font-size:18px;
    }
}

/* Mobile */
@media (max-width:767px){

    .nopal-form-grid{
        grid-template-columns:1fr;
        row-gap:24px;
    }

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

    .nopal-form input[type="text"],
    .nopal-form input[type="email"],
    .nopal-form input[type="tel"],
    .nopal-form textarea{
        font-size:17px;
    }

    .nopal-form-aceptacion{
        margin-top:34px;
    }
}