/* contact.css — CONTACT + JOYSTICK + FOOTER (todo en una sola pantalla) */
.contact{background:var(--ink);color:var(--paper);padding:70px 4vw 24px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.contact-head h2{font:clamp(44px,6.5vw,96px)/.78 var(--display);letter-spacing:-.085em;margin:40px 0 0}.contact-head h2 em{font-family:var(--serif);font-weight:400;color:var(--blue)}.contact-head>p{font-size:24px;margin:10px 0 24px;color:#b9b6ad}
.contact-joy-wrap{display:grid;grid-template-columns:.65fr 1.35fr;gap:26px;align-items:stretch;flex:1;min-height:0}
.contact-joy-copy{border-top:1px solid #414039;padding-top:18px;display:flex;flex-direction:column;justify-content:flex-start}
.chat-label{font-size:8px;color:#77746a}
.chat-log{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin:14px 0 0}
.chat-msg{border:1px solid #4d4a40;padding:9px 12px;font-size:10px;color:#e8e5dc;max-width:330px;align-self:flex-start;border-radius:12px 12px 12px 3px}
.chat-msg--out{align-self:flex-end;background:var(--blue);border-color:var(--blue);color:var(--ink);border-radius:12px 12px 3px 12px}
.chat-form{display:flex;gap:8px;margin-top:12px}
.chat-input{flex:1;min-width:0;background:#050504;border:1px solid #4d4a40;color:var(--paper);padding:11px 12px;font:10px var(--mono);letter-spacing:.06em;outline:none;border-radius:8px}
.chat-input::placeholder{color:#5d5a52}
.chat-input:focus{border-color:var(--blue)}
.chat-send{background:var(--blue);color:var(--ink);border:0;border-radius:8px;padding:0 14px;font:600 9px var(--mono);cursor:pointer;letter-spacing:.08em}
.chat-send:hover{transform:translateY(-1px)}
.chat-mail{margin-top:10px;font-size:8px;color:#77746a;width:max-content;border-bottom:1px solid #4d4a40;padding-bottom:3px}
.chat-mail:hover{color:var(--paper)}
.contact-joy{border:1px solid #4d4a40;background:#050504;display:grid;place-items:center;min-height:0;overflow:hidden;padding:20px 16px 30px}
.contact-joy .joy-socket{width:min(20vw,270px)}
.footer{margin-top:20px;border-top:1px solid #36352f;padding-top:16px;display:flex;justify-content:space-between;gap:20px;font-size:8px;color:#67645c}
.footer-jur{display:flex;flex-direction:row;gap:18px}

@media(max-width:900px){
  .contact{padding:50px 18px 16px}.contact-head h2{font-size:11.5vw}.contact-head>p{font-size:20px;margin:8px 0 16px}.contact-joy-wrap{grid-template-columns:1fr;gap:12px}.contact-joy-copy{min-height:0}.contact-joy{height:30vh}
  .contact-joy .joy-socket{width:min(48vw,200px)}
  .chat-log{margin-top:10px}.chat-msg{padding:7px 10px;font-size:9px}
  .chat-form{margin-top:10px}.chat-input{padding:9px 10px}.chat-mail{margin-top:8px}
  .footer{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 14px;text-align:center;margin-top:12px;padding-top:10px;font-size:7px}
  .footer-jur{flex-direction:row;align-items:center;gap:10px}
}
@media(max-height:820px){
  .contact-head h2{font-size:clamp(32px,7.5vh,56px);margin:24px 0 0}
  .contact-head>p{font-size:16px;margin:6px 0 14px}
  .contact{padding:50px 4vw 16px}
  .contact-joy{padding:10px}
  .contact-joy .joy-socket{width:min(26vh,200px)}
  .contact-joy-copy{padding-top:12px}
  .chat-msg{margin-top:10px;padding:8px 10px}
  .chat-input{padding:9px 10px}
  .footer{margin-top:12px;padding-top:12px}
}