/* ==========================================================
   Contacto - FichajePresencial.es
   ========================================================== */

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr);
    gap: 26px;
    align-items: start;
}

.form-card,
.info-card {
    background: #ffffff;
    border: 1px solid var(--line, #d7eef3);
    border-radius: 28px;
    box-shadow: 0 16px 48px rgba(8, 127, 155, .10);
    padding: 30px;
}

.contact-form {
    display: grid;
    gap: 16px;
}

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

.field {
    display: grid;
    gap: 8px;
}

.field label {
    color: var(--ink, #102a33);
    font-weight: 900;
    font-size: .96rem;
}

.field input,
.field textarea {
    width: 100%;
    border: 1px solid var(--line, #d7eef3);
    border-radius: 16px;
    background: #ffffff;
    color: var(--ink, #102a33);
    padding: 14px 15px;
    font: inherit;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

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

.field input:focus,
.field textarea:focus {
    border-color: var(--blue, #22c7df);
    box-shadow: 0 0 0 4px rgba(34, 199, 223, .14);
    background: #fbfeff;
}

.captcha-row {
    display: grid;
    grid-template-columns: 1fr minmax(180px, 260px);
    gap: 14px;
    align-items: end;
}

.form-card .btn {
    width: fit-content;
    border: 0;
}

.info-card h2 {
    margin: 0 0 18px;
    font-size: 1.7rem;
    letter-spacing: -.03em;
}

.mini-item {
    padding: 17px 0;
    border-top: 1px solid var(--line, #d7eef3);
    color: var(--muted, #55707a);
}

.mini-item:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.mini-item strong {
    display: block;
    color: var(--ink, #102a33);
    font-size: 1.02rem;
    margin-bottom: 4px;
}

.mini-item a {
    color: var(--blue-dark, #087f9b);
    font-weight: 850;
}

.notice {
    padding: 15px 17px;
    border-radius: 18px;
    margin-bottom: 18px;
    font-weight: 850;
}

.notice.ok {
    background: #ecfdf3;
    color: #067647;
    border: 1px solid #abefc6;
}

.notice.error {
    background: #fef3f2;
    color: #b42318;
    border: 1px solid #fecdca;
}

@media (max-width: 860px) {
    .contact-grid,
    .form-row,
    .captcha-row {
        grid-template-columns: 1fr;
    }

    .form-card,
    .info-card {
        padding: 22px;
        border-radius: 24px;
    }

    .form-card .btn {
        width: 100%;
    }
}