/* ==================================================================
   KAPAY · Contact
   ------------------------------------------------------------------
   Hoja propia de contact.html. Depende de css/home.css: de ahi salen
   los tokens, la escala tipografica, los botones y el pie en navy.
   Aqui solo lo de esta pagina, con prefijo .kn-.

   Sustituye a la maquetacion anterior, que tenia titulares Anton en
   mayusculas, iconos de Material y cuatro bloques con emoji (⚡ 🎯 💶
   🔓) como iconografia — justo lo que 02_BRAND/BRAND.md §2 y §5 piden
   evitar.
   ================================================================== */

.kn-hero{ padding:152px 0 0; }
.kn-hero .kh-lead{ margin-top:24px; }

/* ── Los dos canales reales ────────────────────────────────────────
   WhatsApp y correo. Son los dos unicos que existen, asi que ocupan
   el ancho entre los dos en vez de repartirse con rellenos. */
.kn-channels{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--kh-rule); margin-top:56px;
}
.kn-ch{
  display:block; padding:30px 32px 32px 0; position:relative;
  border-bottom:1px solid var(--kh-rule);
}
.kn-ch:first-child::after{
  content:''; position:absolute; right:0; top:0; bottom:0; width:1px;
  background:var(--kh-rule-soft);
}
.kn-ch:last-child{ padding-left:32px; padding-right:0; }
.kn-ch-t{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.kn-ch-t svg{ flex-shrink:0; }
.kn-ch-l{
  font-size:11.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--kh-ink-34);
}
.kn-ch-v{
  display:block; font-size:clamp(20px,2vw,25px); font-weight:600;
  letter-spacing:-.025em; color:var(--kh-ink); margin-bottom:8px;
}
.kn-ch p{ font-size:15px; line-height:1.6; color:var(--kh-ink-60); margin:0 0 16px; }
.kn-ch .kh-link{ font-size:15px; }
a.kn-ch:hover .kn-ch-v{ color:var(--kh-ink); }

/* ── Formulario ────────────────────────────────────────────────────
   Sin caja ni sombra: campos sobre filete, como el resto del sitio. */
.kn-form-grid{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,10fr); gap:80px; align-items:start; }

.kn-fields{ display:grid; gap:22px; margin-top:8px; }
.kn-two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.kn-f label{
  display:block; font-size:12px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--kh-ink-34); margin-bottom:9px;
}
.kn-f input,
.kn-f select,
.kn-f textarea{
  width:100%; font-family:var(--kh-sans); font-size:16px; color:var(--kh-ink);
  background:#fff; border:1px solid var(--kh-rule); border-radius:9px;
  padding:13px 14px; transition:border-color .16s, box-shadow .16s;
}
.kn-f textarea{ resize:vertical; min-height:104px; line-height:1.6; }
.kn-f input::placeholder,
.kn-f textarea::placeholder{ color:var(--kh-ink-34); }
.kn-f input:focus,
.kn-f select:focus,
.kn-f textarea:focus{
  outline:none; border-color:var(--kh-accent);
  box-shadow:0 0 0 3px rgba(245,130,32,.13);
}
.kn-f select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2316213E' stroke-opacity='.45' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px;
}

/* campo con error */
.kn-f.bad input,
.kn-f.bad textarea{ border-color:#B3261E; }
.kn-err{
  display:none; margin-top:7px; font-size:13px; color:#B3261E;
  letter-spacing:-.005em;
}
.kn-f.bad .kn-err{ display:block; }

/* ── Envio ─────────────────────────────────────────────────────────
   Dos botones, no uno: el sitio no tiene servidor, asi que el mensaje
   se compone aqui y se entrega al canal que elija el visitante. */
.kn-send{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  margin-top:30px; padding-top:28px; border-top:1px solid var(--kh-rule);
}
.kn-note{
  margin-top:16px; font-size:13.5px; line-height:1.6; color:var(--kh-ink-34);
}

/* ── Que esperar de la llamada ─────────────────────────────────────*/
.kn-expect{ list-style:none; margin:52px 0 0; padding:0; border-top:1px solid var(--kh-rule); }
.kn-expect li{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:40px; padding:24px 0; border-bottom:1px solid var(--kh-rule);
}
.kn-expect b{ font-size:17px; font-weight:600; letter-spacing:-.015em; color:var(--kh-ink); }
.kn-expect span{ font-size:16px; line-height:1.68; color:var(--kh-ink-60); }

/* ==================================================================
   Responsive
   ================================================================== */
@media (max-width:1000px){
  .kn-form-grid{ grid-template-columns:1fr; gap:44px; }
  .kn-channels{ grid-template-columns:1fr; }
  .kn-ch{ padding:26px 0; }
  .kn-ch:first-child::after{ content:none; }
  .kn-ch:last-child{ padding-left:0; }
  .kn-expect li{ grid-template-columns:1fr; gap:8px; }
}

@media (max-width:860px){
  .kn-hero{ padding:126px 0 0; }
}

@media (max-width:640px){
  .kn-two{ grid-template-columns:1fr; }
  .kn-send{ flex-direction:column; align-items:stretch; }
  .kn-send .kh-btn{ justify-content:center; }
}