/* ==========================================================================
   REGISTRO MAYORISTA — /registro-mayorista/
   Una sola columna a proposito: el registro promete dos minutos, asi que la
   pantalla tiene que PARECER de dos minutos. Nada de dos columnas que obliguen
   a decidir por donde empezar.
   ⚠️ TRAMPA DE ESPECIFICIDAD — leer antes de tocar los margenes de esta hoja.
   landing.css:32 tiene `.kf-landing p { margin: 0 }`, que es (0,1,1). Toda regla
   de UNA sola clase sobre un <p> —(0,1,0)— PIERDE contra ella y su margin se
   ignora, aunque esta hoja cargue despues: la especificidad manda sobre el orden.
   Paso en vivo el 2-sep-2026: la bajada del hero no se centraba y los nueve
   campos del formulario quedaban pegados uno a otro.
   Por eso cada regla de margen sobre un <p> va prefijada con `.kf-reg` (0,2,0).
   Si anades un <p> con margen, prefijalo igual o no se aplicara.
   ========================================================================== */

.kf-reg__hero { padding: 40px 0 8px; text-align: center; }
.kf-reg__hero h1 { font-family: var(--kf-font-head); font-size: clamp(28px, 5vw, 40px); margin: 8px 0 10px; color: var(--kf-text); }
.kf-reg .kf-reg__bajada { max-width: 34em; margin: 0 auto; font-size: 16.5px; line-height: 1.6; color: var(--kf-text-2, #534A7E); }

/* Los cuatro pasos, con el vocabulario de /mayoreo/ para que se reconozca */
.kf-reg__pasos {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 18px; margin: 24px auto 0; padding: 0; max-width: 720px;
}
.kf-reg__paso { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: #8C84AE; }
.kf-reg__paso span {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: #EAE4FA; color: #5E4DB2; font-weight: 700; font-size: 12.5px; flex: 0 0 auto;
}
.kf-reg__paso--on { color: var(--kf-primary-dark); font-weight: 700; }
.kf-reg__paso--on span { background: var(--kf-primary); color: #fff; }

/* La tarjeta unica */
.kf-reg__form { padding: 26px 0 60px; }
.kf-reg__caja {
  max-width: 620px; background: #fff; border: 1px solid var(--kf-border-card, #EEE9FA);
  border-radius: var(--kf-r-card, 22px); padding: 30px 32px;
  box-shadow: var(--kf-shadow-card, 0 10px 26px rgba(74,58,122,.07));
}

.kf-reg__campos fieldset { border: 0; padding: 0; margin: 0 0 22px; }
.kf-reg__campos legend {
  font-family: var(--kf-font-head); font-weight: 700; font-size: 15px;
  color: var(--kf-primary-dark); padding: 0 0 10px; margin: 0;
}

.kf-reg .kf-campo { margin: 0 0 16px; }
/* Etiqueta SIEMPRE visible, nunca el placeholder haciendo de etiqueta: al
   escribir desaparece y el usuario ya no sabe que campo esta llenando. */
.kf-campo label { display: block; font-size: 13.5px; font-weight: 600; color: var(--kf-text-2, #534A7E); margin-bottom: 5px; }
.kf-campo input[type=text],
.kf-campo input[type=tel],
.kf-campo input[type=email],
.kf-campo select {
  width: 100%;
  /* 52px de alto y 16px de fuente: menos de 16 hace que iOS haga zoom al
     enfocar y descoloque la pagina entera, que parece un fallo del sitio. */
  min-height: 52px; font-size: 16px;
  padding: 10px 14px;
  border: 1px solid var(--kf-border, #E3DBF6); border-radius: var(--kf-r-input, 14px);
  background: #fff; color: var(--kf-text); font-family: inherit;
}
.kf-campo input:focus-visible,
.kf-campo select:focus-visible {
  outline: 3px solid var(--kf-primary); outline-offset: 1px; border-color: var(--kf-primary);
}
.kf-campo small { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.45; color: var(--kf-text-2, #534A7E); }

.kf-campo__fila { display: flex; gap: 14px; }
.kf-campo__fila .kf-campo { flex: 1 1 0; min-width: 0; }

/* La casilla de habeas data: separada, con aire, y con el texto legible.
   No es letra pequeña escondida — es lo que hace valida la autorizacion. */
.kf-reg .kf-campo--check {
  background: #F7F4FE; border: 1px solid #E3DBF6; border-radius: 14px;
  padding: 14px 16px; margin: 4px 0 20px;
}
.kf-campo--check label { display: flex; gap: 11px; align-items: flex-start; font-weight: 400; font-size: 13px; line-height: 1.55; margin: 0; }
.kf-campo--check input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--kf-primary); }
.kf-campo--check a { color: var(--kf-primary-dark); }

/* La trampa para bots. Fuera de pantalla y no con display:none, que los bots
   de hoy detectan. tabindex="-1" y aria-hidden la sacan del teclado y del lector. */
.kf-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.kf-reg .kf-reg__enviar { margin: 0 0 14px; }
.kf-reg__enviar .kf-btn { width: 100%; min-height: 54px; font-size: 17px; justify-content: center; }
.kf-reg__ayuda { font-size: 13px; color: var(--kf-text-2, #534A7E); text-align: center; margin: 0; line-height: 1.6; }
.kf-reg__ayuda a { color: var(--kf-primary-dark); }

/* --- Pantalla de gracias --- */
.kf-reg__hecho { padding: 56px 0 70px; }
.kf-reg__hecho .kf-reg__caja { text-align: center; }
.kf-reg__ok { width: 62px; height: 62px; color: var(--kf-success, #2C6E49); margin: 0 auto 14px; display: block; }
.kf-reg__hecho h1 { font-family: var(--kf-font-head); font-size: clamp(24px, 4.5vw, 32px); margin: 0 0 16px; }
.kf-reg .kf-reg__destacado {
  background: #F3F0FB; border-radius: 14px; padding: 14px 16px; margin: 0 0 14px;
  font-size: 15px; line-height: 1.6; color: var(--kf-text);
}
.kf-reg .kf-reg__acciones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 22px 0 16px; }
.kf-reg__pie { font-size: 13px; color: #8C84AE; margin: 0; }


@media (max-width: 560px) {
  .kf-reg__caja { padding: 22px 18px; border-radius: 18px; }
  /* Por debajo de 420px dos campos en fila dejan cajas de tres caracteres. */
  .kf-campo__fila { flex-direction: column; gap: 0; }
  .kf-reg__pasos { gap: 6px 12px; }
  .kf-reg__paso { font-size: 12.5px; }
  .kf-reg__acciones { flex-direction: column; }
  .kf-reg__acciones .kf-btn { width: 100%; justify-content: center; }
}