/* ─────────────────────────────────────────────────────────────
   Kunko · formularios.

   Los formularios eran cajas con borde y esquinas redondeadas,
   el mismo objeto que se saco del resto del sitio. Este sistema
   los pone en el mismo idioma que las paginas: el campo es una
   linea de base, no una cajita; la tipografia manda; el color
   aparece solo cuando algo pasa.

   Reglas que lo ordenan:

   1. Un campo se ve como una linea, y al enfocarlo la linea
      cambia de color y peso. Sin sombras ni relieve.
   2. El boton dice que va a pasar, no "Enviar".
   3. Los tres estados existen de verdad: enviando, error y
      recibido. Nada de confirmar algo que no ocurrio.
   4. La letra chica esta antes del boton, no despues: si dice
      algo que importa, se lee antes de decidir.

   Depende de editorial.css para los tokens.
   ───────────────────────────────────────────────────────────── */

.kf{max-width:520px;margin:0}
.kf[hidden]{display:none}

.kf-linea{position:relative;margin-bottom:26px}
.kf-linea label{display:block;font-family:'Space Mono',monospace;font-size:10px;font-weight:700;
                letter-spacing:.15em;text-transform:uppercase;color:var(--mut, var(--gray2, #9d99b3));margin-bottom:10px}

.kf input,.kf select{
  width:100%;border:0;border-bottom:1.5px solid var(--rule, rgba(21,18,46,.12));background:transparent;
  font-family:'Poppins',sans-serif;font-size:19px;font-weight:500;color:var(--ink, var(--navy, #15122e));
  padding:6px 0 12px;border-radius:0;appearance:none;
  transition:border-color .22s cubic-bezier(.2,.7,.2,1);
}
.kf input::placeholder{color:var(--mut, var(--gray2, #9d99b3));font-weight:400}
.kf input:focus,.kf select:focus{outline:0;border-bottom-color:var(--ink, var(--navy, #15122e))}
.kf input:focus + .kf-marca,.kf select:focus + .kf-marca{transform:scaleX(1)}

/* La linea de foco crece desde la izquierda, igual que el nav. */
.kf-marca{position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--pink, #e91e8a);
          transform:scaleX(0);transform-origin:left;
          transition:transform .28s cubic-bezier(.2,.7,.2,1)}

.kf select{cursor:pointer}
.kf-linea.sel::after{content:'';position:absolute;right:2px;bottom:20px;width:7px;height:7px;
                     border-right:1.5px solid var(--ink2, var(--gray, #5b5875));border-bottom:1.5px solid var(--ink2, var(--gray, #5b5875));
                     transform:rotate(45deg);pointer-events:none}

/* Campo con problema */
.kf .mal{border-bottom-color:var(--red, #e5484d)}
.kf-aviso{display:none;font-size:13.5px;line-height:1.5;color:var(--red, #e5484d);margin-top:9px}
.kf-linea.con-error .kf-aviso{display:block}

/* La letra chica va ANTES del boton: si dice algo que importa,
   se lee antes de decidir, no despues de haber decidido. */
.kf-fina{font-size:13px;line-height:1.55;color:var(--ink2, var(--gray, #5b5875));margin:0 0 22px;max-width:46ch}
.kf-fina a{color:var(--ink, var(--navy, #15122e));text-decoration:underline;text-underline-offset:2px}

.kf-boton{display:inline-flex;align-items:center;gap:12px;border:0;cursor:pointer;
          font-family:'Poppins',sans-serif;font-size:16px;font-weight:600;color:#fff;
          background:var(--ink, var(--navy, #15122e));padding:17px 30px;border-radius:999px;
          transition:background .2s,transform .18s,opacity .2s}
.kf-boton:hover{background:var(--pink, #e91e8a);transform:translateY(-1px)}
.kf-boton:disabled{opacity:.55;cursor:wait;transform:none}
.kf-boton .flecha{transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.kf-boton:hover .flecha{transform:translateX(4px)}

/* Enviando: un punto que late, sin spinners que giran para siempre */
.kf-boton .punto{width:8px;height:8px;border-radius:50%;background:currentColor;display:none;
                 animation:kf-late 1.1s ease-in-out infinite}
.kf-boton[data-enviando] .punto{display:block}
.kf-boton[data-enviando] .flecha{display:none}
@keyframes kf-late{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* Si el envio falla, se dice y se da una salida que funciona */
.kf-error{display:none;margin-top:20px;border-left:3px solid var(--red, #e5484d);padding:2px 0 2px 20px}
.kf-error p{font-size:14.5px;line-height:1.55;margin:0;color:var(--ink2, var(--gray, #5b5875));max-width:46ch}
.kf-error a{color:var(--ink, var(--navy, #15122e));font-weight:600;text-decoration:underline;text-underline-offset:2px}
.kf.fallo .kf-error{display:block}

/* Recibido */
.kf-ok{display:none}
.kf-ok.on{display:block;animation:kf-entra .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes kf-entra{from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none}}
.kf-ok .marca{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.kf-ok .marca i{width:34px;height:34px;border-radius:50%;background:var(--em, var(--emerald, #12a874));flex-shrink:0;
                position:relative;display:block}
.kf-ok .marca i::after{content:'';position:absolute;left:11px;top:9px;width:8px;height:14px;
                       border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;
                       transform:rotate(42deg)}
.kf-ok .marca b{font-family:'Satoshi','Poppins',sans-serif;font-size:clamp(24px,3vw,34px);
                font-weight:900;letter-spacing:-.03em;line-height:1}
.kf-ok p{font-size:16px;line-height:1.6;color:var(--ink2, var(--gray, #5b5875));max-width:48ch;margin:0 0 22px}

@media(prefers-reduced-motion:reduce){
  .kf-marca,.kf-boton .flecha{transition:none}
  .kf-boton .punto{animation:none}
  .kf-ok.on{animation:none}
}

/* ── CHIPS ──
   Multiseleccion opcional: sirven para segmentar, nunca para bloquear el
   envio. Se ven como etiquetas, no como botones: el que manda es el email. */
.kf-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.kf-chip{font-family:'Poppins',sans-serif;font-size:14px;font-weight:500;cursor:pointer;
         padding:9px 16px;border-radius:999px;background:transparent;
         color:var(--ink2, var(--gray, #5b5875));
         border:1px solid var(--rule, rgba(21,18,46,.12));
         transition:border-color .18s,color .18s,background .18s}
.kf-chip:hover{border-color:var(--ink, var(--navy, #15122e));color:var(--ink, var(--navy, #15122e))}
.kf-chip.sel{background:var(--ink, var(--navy, #15122e));border-color:var(--ink, var(--navy, #15122e));color:#fff}
.kf-chips + .kf-linea{margin-top:0}