/* =========================================
   🌌 AION GAMES — CONTACT (GLASS / TYPO PARITY)
   Scope: SOLO #contact
   ========================================= */

#contact[data-section]{
  align-items: stretch; /* paridad con roadmap */
  justify-content: center;
  box-sizing: border-box;

  /* Homogeneidad de aire HUD (menos arriba, más abajo) */
  --ct-top-offset: -20px;       /* antes -30px → bajaba demasiado el panel */
  --ct-bottom-clearance: 220px;  /* antes 210px → un toque más de aire inferior */

  padding-top: calc(var(--hud-top-height) + var(--ct-top-offset));
  padding-bottom: var(--ct-bottom-clearance);
}

/* Wrapper interno (paridad con CODEX/PROJECTS) */
#contact .section-inner.contact-content{
  max-width: min(1120px, 100vw - 3rem);
  width: 100%;
  margin: 0 auto;

  padding-top: 1.8rem;
  padding-bottom: 2rem;

  display: flex;
  justify-content: center;

  /* ✅ evita que el panel se “estire” a pantalla completa */
  align-items: center;

  background: transparent;
}

/* Reusamos el panel de CODEX para clavar el vidrio holograma */
#contact .contact-widescreen{
  width: 100%;

  /* Un notch menos alto (más similar a “comodidad” de otras secciones) */
  min-height: min(460px, calc(100vh - 320px));
  max-height: min(640px, calc(100vh - 240px));

  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

/* Header */
#contact .contact-header{
  max-width: 860px;
}

#contact .contact-title{
  margin: 0;
}

#contact .contact-sub{
  margin-top: 0.55rem;
  max-width: 76ch;
  line-height: 1.55;
  color: rgba(var(--cx-off-rgb), 0.80);
}

/* Form */
#contact .contact-form{
  width: 100%;
  max-width: 760px;

  display: grid;
  gap: 0.85rem;
}

#contact .contact-field{
  width: 100%;
}

#contact .contact-input{
  width: 100%;
  padding: 0.95rem 1rem;

  border-radius: 14px;
  border: 1px solid rgba(var(--cx-holo-rgb), 0.32);

  color: rgba(var(--cx-off-rgb), 0.92);
  background:
    radial-gradient(600px 180px at 18% 8%,
      rgba(245, 250, 255, 0.04),
      rgba(245, 250, 255, 0.00) 62%
    ),
    linear-gradient(
      180deg,
      rgba(4, 60, 80, 0.10),
      rgba(10, 15, 20, 0.22)
    );

  box-shadow:
    0 0 0 1px rgba(var(--cx-holo-rgb), 0.08) inset,
    0 0 18px rgba(var(--cx-holo-rgb), 0.08);

  outline: none;
}

#contact .contact-textarea{
  resize: vertical;
  min-height: 160px;
}

#contact .contact-input::placeholder{
  color: rgba(var(--cx-off-rgb), 0.55);
}

#contact .contact-input:focus{
  border-color: rgba(var(--cx-holo-rgb), 0.55);
  box-shadow:
    0 0 0 1px rgba(var(--cx-holo-rgb), 0.14) inset,
    0 0 26px rgba(var(--cx-holo-rgb), 0.12),
    0 0 0 2px rgba(var(--cx-holo-rgb), 0.22);
}

/* Actions row */
#contact .contact-actions{
  margin-top: 0.35rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Submit button (vidrio HUD, sin inventar look nuevo) */
#contact .contact-submit{
  appearance: none;
  border: 1px solid rgba(var(--cx-holo-rgb), 0.36);
  border-radius: 14px;

  padding: 0.85rem 1.05rem;

  background:
    radial-gradient(520px 200px at 20% 10%,
      rgba(245, 250, 255, 0.05),
      rgba(245, 250, 255, 0.00) 62%
    ),
    linear-gradient(
      180deg,
      rgba(4, 60, 80, 0.12),
      rgba(10, 15, 20, 0.22)
    );

  color: rgba(var(--cx-off-rgb), 0.92);
  cursor: pointer;

  box-shadow:
    0 0 0 1px rgba(var(--cx-holo-rgb), 0.10) inset,
    0 0 18px rgba(var(--cx-holo-rgb), 0.10);

  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

#contact .contact-submit:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--cx-holo-rgb), 0.48);
  box-shadow:
    0 0 0 1px rgba(var(--cx-holo-rgb), 0.12) inset,
    0 0 26px rgba(var(--cx-holo-rgb), 0.14);
}

#contact .contact-submit:active{
  transform: translateY(0px);
}

/* Email link */
#contact .contact-email{
  margin-left: auto;
  text-decoration: none;
  color: rgba(var(--cx-off-rgb), 0.82);
  border-bottom: 1px solid rgba(var(--cx-holo-rgb), 0.22);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

#contact .contact-email:hover{
  color: rgba(var(--cx-off-rgb), 0.95);
  border-color: rgba(var(--cx-holo-rgb), 0.38);
}

/* Nota inferior */
#contact .contact-note{
  margin-top: 0.15rem;
  color: rgba(var(--cx-off-rgb), 0.55);
}

/* Honeypot invisible */
#contact .contact-hp{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =========================================
   FINAL LOCK (NO TOCAR)
   CONTACT — TYPO SYSTEM (MATCH ROADMAP/DEVLOG)
   Scope: SOLO #contact
   ========================================= */

#contact{
  --ct-font-head: var(--font-head, "Futura", "Futura PT", system-ui, sans-serif);
  --ct-font-body: var(--font-body, "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);

  --ct-track-ui: 0.14em;
  --ct-track-body: 0.01em;
  --ct-track-title: 0.06em;

  font-synthesis: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#contact,
#contact .contact-widescreen,
#contact .contact-form,
#contact .contact-input,
#contact .contact-note{
  font-family: var(--ct-font-body);
  letter-spacing: var(--ct-track-body);
}

#contact .contact-title{
  font-family: var(--ct-font-head);
  font-weight: 700;
  letter-spacing: var(--ct-track-title);
  text-transform: uppercase;
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
}

#contact .contact-submit,
#contact .contact-email{
  font-family: var(--ct-font-body);
  font-weight: 400;
  letter-spacing: var(--ct-track-ui);
  text-transform: uppercase;
}