/* Cierre de contacto: una conversación guiada, no un formulario genérico. */
.contact { position: relative; padding: 126px 0 106px; }
.contact::before { position: absolute; top: 0; right: 0; left: 0; height: 1px; background: #3c473a; content: ''; }
.contact-grid { grid-template-columns: minmax(320px, .9fr) minmax(580px, 1.1fr); gap: clamp(64px, 9vw, 170px); align-items: start; }
.contact-copy { padding-top: 8px; }
.contact-copy h2 { max-width: 690px; margin-bottom: 28px; font-size: clamp(3.05rem, 4.45vw, 5.2rem); }
.contact-copy .lead { max-width: 525px; color: #c4cdc2; }
.contact-channels { display: grid; max-width: 450px; margin-top: 42px; border-top: 1px solid #4a5448; }
.contact-channels a { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 15px 0; border-bottom: 1px solid #4a5448; color: var(--white); text-decoration: none; transition: color .2s ease, padding .2s ease; }
.contact-channels a span { color: #9ca79a; font: 500 .71rem 'DM Mono', monospace; letter-spacing: .08em; }
.contact-channels a strong { display: inline-flex; gap: 12px; align-items: center; font-size: .95rem; }
.contact-channels b { font-size: 1.2rem; font-weight: 400; transition: transform .2s ease; }
.contact-channels a:hover { padding-right: 5px; color: var(--lime); }
.contact-channels a:hover b { transform: translateX(5px); }
.contact-form { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 27px 24px; margin: 0; padding: 39px 36px 32px; border: 1px solid #364134; background: #192018; box-shadow: 14px 14px 0 rgba(182,244,0,.08); transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.contact-form::before { position: absolute; top: -1px; left: 0; width: 115px; height: 3px; background: var(--lime); content: ''; transform-origin: left center; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.contact-form .form-kicker { grid-column: 1 / -1; margin: 0 -0.2rem 2px; color: var(--lime); font: 500 .73rem 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.contact-form label { display: grid; gap: 9px; color: var(--white); font-size: .77rem; font-weight: 700; }
.contact-form input,.contact-form select,.contact-form textarea { min-height: 44px; padding: 10px 0; border: 0; border-bottom: 1px solid #65705f; border-radius: 0; background: transparent; color: var(--white); font: 400 .95rem Manrope, Arial, sans-serif; transition: border-color .2s ease, background .2s ease; }
.contact-form input::placeholder,.contact-form textarea::placeholder { color: #849080; opacity: 1; }
.contact-form select { padding-right: 24px; cursor: pointer; }
.contact-form textarea { min-height: 116px; padding: 12px; border: 1px solid #65705f; resize: vertical; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-color: var(--lime); outline: 0; background: rgba(182,244,0,.045); }
.contact-form .full { grid-column: 1 / -1; }
.contact-form .button { grid-column: 1 / -1; justify-content: space-between; min-height: 52px; margin-top: -3px; padding-right: 22px; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.contact-form .button:hover { background: var(--white); box-shadow: 5px 5px 0 var(--lime); transform: translate(-3px,-3px); }
.contact-form .button:focus-visible,.contact-channels a:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.contact-form .website-field { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contact-form .form-status { display: none; grid-column: 1 / -1; min-height: 0; margin: -12px 0 0; color: #c5cdc1; font-size: .84rem; line-height: 1.4; }
.contact-form .form-status[data-state] { display: block; }
.contact-form .form-status[data-state="success"] { color: var(--lime); }
.contact-form .form-status[data-state="error"] { color: #ff9c96; }
.contact-form .form-status[data-state="pending"] { color: #c5cdc1; }
.contact-form .button:disabled { cursor: wait; opacity: .7; transform: none; box-shadow: none; }
.contact-channels > a:first-child { margin-top: 10px; padding: 17px 16px; border: 1px solid #52604e; background: rgba(182,244,0,.055); }
.contact-channels > a:first-child span { display: inline-flex; align-items: center; gap: 9px; color: var(--lime); }
.contact-channels > a:first-child span::before { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(182,244,0,.1); content: ''; animation: contact-pulse 2.4s ease-in-out infinite; }
.contact-channels > a:first-child:hover { padding-right: 21px; border-color: var(--lime); background: var(--lime); color: var(--ink); }
.contact-channels > a:first-child:hover span { color: #405334; }
.contact-channels > a:first-child:hover span::before { background: var(--ink); box-shadow: 0 0 0 5px rgba(17,20,16,.12); }
.contact-form:focus-within { border-color: #788b71; box-shadow: 18px 18px 0 rgba(182,244,0,.14); transform: translate(-3px,-3px); }
.contact-form:focus-within::before { transform: scaleX(5); }
.contact-form label { position: relative; }
.contact-form label:focus-within { color: var(--lime); }
@keyframes contact-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(.7); } }
@media (max-width:980px) { .contact-grid { grid-template-columns: 1fr; gap: 52px; } .contact-copy h2 { max-width: 760px; } .contact-channels { max-width: 560px; } }
@media (max-width:620px) { .contact { padding: 78px 0 70px; } .contact-copy h2 { font-size: clamp(2.75rem, 13vw, 4rem); } .contact-channels a { align-items: flex-start; flex-direction: column; gap: 5px; } .contact-form { grid-template-columns: 1fr; gap: 22px; padding: 31px 22px 24px; box-shadow: 7px 7px 0 rgba(182,244,0,.08); } .contact-form .full,.contact-form .button,.contact-form .form-status { grid-column: auto; } }
@media (prefers-reduced-motion:reduce) { .contact-channels a,.contact-channels b,.contact-form,.contact-form::before,.contact-form input,.contact-form select,.contact-form textarea,.contact-form .button { transition: none; } .contact-channels > a:first-child span::before { animation:none; } }