/* Contacto en dos columnas: datos directos y formulario con identidad Sumtec. */
.contact { background: #e7edf1; padding: 80px 0; }
.contact__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.contact__info { padding-top: 8px; }
.contact__info h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); max-width: 15ch; }
.contact__info > p { color: #4d626f; margin-top: 20px; max-width: 38ch; }
.contact__list { list-style: none; padding: 0; margin: 32px 0; display: grid; gap: 14px; }
.contact__list a { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.contact__social { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; list-style: none; padding: 0; margin: 0; }
.contact__social a { display: flex; }
.contact__social svg { width: 24px; height: 24px; transition: transform .2s ease; }
.contact__social a:hover svg { transform: translateY(-2px); }
.contact__form-area { min-width: 0; }
.contact__form-area h3 { padding-bottom: 16px; margin-bottom: 24px; border-bottom: 2px solid var(--celeste-industrial); font-size: 1.5rem; color: var(--azul-profundo); }
.contact__form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px 18px; background: white; border: 1px solid #d9e1e7; border-radius: 14px; padding: 30px; box-shadow: 0 12px 32px #163e5710; }
.contact__field { min-width: 0; display: grid; gap: 8px; }
.contact__field--full, .contact__submit-row, .contact__feedback { grid-column: 1 / -1; }
.contact__field label { font-size: .875rem; font-weight: 600; }
.contact__field label span { color: #617481; font-weight: 400; font-size: .75rem; }
.contact__field input, .contact__field textarea { width: 100%; min-width: 0; border: 1px solid #cbd5dd; border-radius: 8px; background: #f5f7f9; color: var(--grafito); padding: 13px 14px; font: inherit; font-size: 1rem; }
.contact__field input { min-height: 50px; }
.contact__field textarea { resize: vertical; min-height: 132px; }
.contact__field input::placeholder, .contact__field textarea::placeholder { color: #6c7c89; opacity: 1; }
.contact__field input:focus, .contact__field textarea:focus { background: white; border-color: var(--celeste-industrial); outline: 2px solid #0093ce30; outline-offset: 2px; }
.contact__submit-row { display: flex; align-items: center; gap: 18px; justify-content: flex-end; }
.contact__submit-row p { margin: 0; font-size: .75rem; color: #536b7b; max-width: 25ch; }
.contact__submit-row button { border: 1px solid #005081; border-radius: 7px; background: linear-gradient(#0878ad, #005695); color: white; padding: 13px 18px; font-size: .875rem; font-weight: 600; cursor: pointer; flex-shrink: 0; box-shadow: inset 0 1px 0 #ffffff40; }
.contact__submit-row button:hover { background: #004674; }
.contact__submit-row button:disabled { opacity: .5; cursor: default; }
.contact__feedback { margin: 0; font-size: .875rem; color: #245578; }
.contact__feedback[data-state="error"] { color: #a33131; }
.contact__feedback[data-state="success"] { color: #146039; }
@media (max-width: 1000px) { .contact__grid { gap: 32px; grid-template-columns: 1fr 1.3fr; } .contact__form { padding: 24px; } .contact__submit-row { align-items: flex-start; flex-direction: column; } .contact__submit-row p { max-width: none; } }
@media (max-width: 767px) { .contact { padding: 56px 0; } .contact__grid { grid-template-columns: 1fr; gap: 40px; } .contact__info h2 { max-width: none; } .contact__form { grid-template-columns: 1fr; padding: 22px; } .contact__submit-row button { width: 100%; } }