/* Cajón de contacto: lateral en escritorio, hoja inferior en móvil. */
.contact { position: fixed; inset: 0; z-index: 90; }
.contact[hidden] { display: none; }

.contact__scrim {
  position: absolute; inset: 0;
  background: rgba(3, 4, 8, .62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0;
}

.contact__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(520px, 100vw);
  display: flex; flex-direction: column;
  background: var(--bg-raise);
  border-left: 1px solid var(--line);
  overflow-y: auto; overscroll-behavior: contain;
}
/* línea de luz ámbar en el borde, como el filamento del logo */
.contact__panel::before {
  content: ''; position: absolute; left: -1px; top: 0; width: 1px; height: 100%;
  background: var(--amber); transform-origin: top; transform: scaleY(var(--glow, 0));
}

.contact__head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(20px, 3vw, 36px);
  background: var(--bg-raise);
  border-bottom: 1px solid var(--line);
}
.contact__tag { color: var(--amber); }
.contact__close {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  transition: background-color .3s, border-color .3s, transform .5s var(--ease-out);
}
.contact__close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; }
.contact__close:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); transform: rotate(90deg); }

.contact__form, .contact__done { padding: clamp(24px, 4vh, 40px) clamp(20px, 3vw, 36px) 36px; }
.contact__title { font-size: clamp(44px, 5.4vw, 76px); }
.contact__lead { margin-top: 14px; color: var(--ink-2); font-size: 16px; line-height: 1.45; max-width: 36ch; }

/* Temas como chips */
.contact__topics { border: 0; margin-top: 30px; }
.contact__topics legend { color: var(--ink-3); margin-bottom: 12px; }
.topics { display: flex; flex-wrap: wrap; gap: 8px; }
.topic { position: relative; cursor: pointer; }
.topic input { position: absolute; opacity: 0; pointer-events: none; }
.topic span {
  display: inline-block; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-2);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease-out);
}
.topic:hover span { border-color: var(--ink-3); color: var(--ink); }
.topic input:checked + span { background: var(--amber); border-color: var(--amber); color: #0b0b0b; }
.topic input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 3px; }
.topic input:active + span { transform: scale(.96); }

/* Campos con etiqueta flotante y subrayado que se enciende */
.field { position: relative; margin-top: 26px; }
.field input, .field textarea {
  width: 100%; display: block;
  padding: 22px 0 10px;
  background: transparent; border: 0; border-bottom: 1px solid var(--line);
  color: var(--ink); font: inherit; font-size: 17px; line-height: 1.4;
  outline: none; border-radius: 0; resize: none;
  transition: border-color .3s;
}
.field textarea { min-height: 96px; }
.field::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px;
  bottom: 0; background: var(--amber);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out);
}
.field:focus-within::after { transform: scaleX(1); }
.field label {
  position: absolute; left: 0; top: 22px;
  color: var(--ink-3); font-size: 17px; pointer-events: none;
  transform-origin: left top;
  transition: transform .35s var(--ease-out), color .3s, letter-spacing .3s;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label {
  transform: translateY(-20px) scale(.72);
  color: var(--ink-2);
  letter-spacing: .02em;
}
.field { transition: margin-bottom .3s var(--ease-out); }
.field__err {
  position: absolute; left: 0; top: calc(100% + 7px);
  color: var(--amber); opacity: 0; transform: translateY(-4px);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em;
  transition: opacity .3s, transform .3s var(--ease-out);
}
.field.is-invalid { margin-bottom: 20px; }
.field.is-invalid input, .field.is-invalid textarea { border-bottom-color: var(--amber); }
.field.is-invalid .field__err { opacity: 1; transform: none; }

.contact__send {
  margin-top: 34px; width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 26px; border-radius: 999px;
  background: var(--amber); color: #0b0b0b;
  font-weight: 800; font-stretch: 125%; font-size: 17px; letter-spacing: .03em;
  transition: transform .4s var(--ease-out), box-shadow .4s;
}
.contact__send span:last-child { transition: transform .4s var(--ease-out); }
.contact__send:hover { box-shadow: 0 0 0 6px rgba(247, 169, 40, .14); }
.contact__send:hover span:last-child { transform: translateX(6px); }
.contact__send:active { transform: scale(.985); }

.contact__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact__send-busy { display: none; }
.contact__send.is-busy { cursor: progress; opacity: .85; }
.contact__send.is-busy .contact__send-label { display: none; }
.contact__send.is-busy .contact__send-busy { display: inline; }
.contact__send.is-busy .contact__send-icon {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(11, 11, 11, .25); border-top-color: #0b0b0b;
  font-size: 0; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.contact__error {
  margin-top: 16px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(247, 169, 40, .45); background: rgba(247, 169, 40, .08);
  color: var(--ink); font-size: 14px; line-height: 1.5;
}
.contact__error[hidden] { display: none; }
.contact__error a { color: var(--amber); border-bottom: 1px solid currentColor; }

.contact__note { margin-top: 16px; color: var(--ink-3); line-height: 1.7; text-transform: none; letter-spacing: .04em; }
.contact__note a, .contact__fallback { color: var(--ink-2); }
.contact__note a:hover { color: var(--amber); }

/* Estado enviado */
.contact__done { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.contact__done[hidden] { display: none; }
.contact__check {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--amber); color: var(--amber);
}
.contact__check svg { width: 28px; height: 28px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .7s .2s var(--ease-out); }
.contact__done.is-in .contact__check svg { stroke-dashoffset: 0; }
.contact__done h2 { font-size: clamp(44px, 5.4vw, 72px); margin-top: 8px; }
.contact__done p { color: var(--ink-2); max-width: 36ch; line-height: 1.45; }
.contact__fallback { text-transform: none; letter-spacing: .04em; line-height: 1.9; }
.contact__copy { display: inline; text-align: left; white-space: nowrap; color: var(--ink); border-bottom: 1px dashed var(--ink-3); padding-bottom: 1px; }
.contact__copy em { font-style: normal; color: var(--amber); margin-left: 6px; }
.contact__again {
  margin-top: 10px; padding: 12px 20px; border-radius: 999px; border: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
.contact__again:hover { background: var(--ink); color: var(--bg); }

.cta__mail {
  margin-top: 4px; color: var(--ink-3);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em;
}
.cta__mail a { color: var(--ink-2); border-bottom: 1px solid var(--line); transition: color .3s, border-color .3s; }
.cta__mail a:hover { color: var(--amber); border-color: var(--amber); }

@media (max-width: 640px) {
  .contact__panel {
    top: auto; left: 0; width: 100vw; max-height: 92vh; max-height: 92dvh;
    border-left: 0; border-top: 1px solid var(--line);
    border-radius: 22px 22px 0 0;
  }
  .contact__panel::before { left: 0; top: -1px; width: 100%; height: 1px; transform-origin: left; transform: scaleX(var(--glow, 0)); }
  .contact__head { border-radius: 22px 22px 0 0; }
  .contact__head::before {
    content: ''; position: absolute; left: 50%; top: 7px; width: 40px; height: 4px; margin-left: -20px;
    border-radius: 4px; background: var(--line);
  }
}