/* ==========================================================================
   TECH EFFECTS KIT — contact-kit.css
   Formulario de registro (envía por correo) + botón de acceso vía WhatsApp.
   Namespace de clases: .ct-*    ·   Namespace JS: window.ContactFX
   Módulo independiente — no depende de otros archivos del kit.
   ========================================================================== */

:root{
  --ct-accent:#00E5A8;
  --ct-whatsapp:#25D366;
  --ct-bg:#0A0D14;
  --ct-line:rgba(255,255,255,0.10);
  --ct-fog:#7C8798;
  --ct-danger:#FF4D4D;
  --ct-mono:'JetBrains Mono','Fira Code','Consolas',monospace;
  --ct-sans:'Inter',system-ui,sans-serif;
}

/* ---------- formulario de registro ---------- */
.ct-form{
  background:var(--ct-bg); border:1px solid var(--ct-line); border-radius:14px;
  padding:26px 24px; font-family:var(--ct-sans); max-width:420px;
}
.ct-form .ct-field{ margin-bottom:16px; }
.ct-form label{
  display:block; font-family:var(--ct-mono); font-size:11px; color:var(--ct-fog);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:7px;
}
.ct-form input, .ct-form textarea{
  width:100%; background:rgba(255,255,255,0.03); border:1px solid var(--ct-line); border-radius:8px;
  padding:11px 13px; color:#fff; font-family:var(--ct-sans); font-size:14px; outline:none;
  transition:border-color .2s ease, background .2s ease;
}
.ct-form input:focus, .ct-form textarea:focus{ border-color:var(--ct-accent); background:rgba(0,229,168,0.04); }
.ct-form textarea{ min-height:90px; resize:vertical; }
.ct-form .ct-error{ font-family:var(--ct-mono); font-size:11px; color:var(--ct-danger); margin-top:6px; display:none; }
.ct-form .ct-field.ct-invalid input, .ct-form .ct-field.ct-invalid textarea{ border-color:var(--ct-danger); }
.ct-form .ct-field.ct-invalid .ct-error{ display:block; }

.ct-submit{
  width:100%; padding:13px; border-radius:8px; border:none; cursor:pointer;
  background:var(--ct-accent); color:#04120d; font-family:var(--ct-mono); font-size:13px; font-weight:600;
  letter-spacing:.02em; transition:box-shadow .2s ease, transform .2s ease;
}
.ct-submit:hover{ box-shadow:0 0 24px -4px var(--ct-accent); transform:translateY(-1px); }
.ct-submit:active{ transform:translateY(0); }

.ct-form-note{ font-family:var(--ct-mono); font-size:10.5px; color:var(--ct-fog); margin-top:12px; line-height:1.6; }
.ct-form-status{ font-family:var(--ct-mono); font-size:12px; margin-top:12px; display:none; }
.ct-form-status.ct-show{ display:block; }
.ct-form-status.ct-ok{ color:var(--ct-accent); }
.ct-form-status.ct-err{ color:var(--ct-danger); }

/* ---------- botón / burbuja de WhatsApp ---------- */
.ct-wa-btn{
  display:inline-flex; align-items:center; gap:9px; background:var(--ct-whatsapp); color:#04140d;
  font-family:var(--ct-mono); font-size:13px; font-weight:600; padding:12px 20px; border-radius:100px;
  text-decoration:none; border:none; cursor:pointer; transition:box-shadow .2s ease, transform .2s ease;
}
.ct-wa-btn:hover{ box-shadow:0 0 24px -4px var(--ct-whatsapp); transform:translateY(-1px); }
.ct-wa-btn svg{ width:18px; height:18px; flex-shrink:0; }

.ct-wa-float{
  position:fixed; bottom:22px; right:22px; z-index:400; width:56px; height:56px; border-radius:50%;
  background:var(--ct-whatsapp); display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px -6px rgba(37,211,102,0.6); text-decoration:none; transition:transform .2s ease;
}
.ct-wa-float:hover{ transform:scale(1.08); }
.ct-wa-float svg{ width:28px; height:28px; }

@media (prefers-reduced-motion: reduce){
  .ct-submit, .ct-wa-btn, .ct-wa-float{ transition:none; }
}