/* Konko · Formulario renderer nuevo — card contenedora; el form interior
   lo tematiza konko-hsfc-form-theme.css (variables --hsf-*). */

.kformnext .ksection__head { margin-bottom: 28px; }

/* Form SIEMPRE a la izquierda (si la landing lo embebe en una sección .center,
   heredaba text-align:center y centraba labels/opciones). */
.kformnext, .kformnext__card, .kformnext .hsfc-Step__Content { text-align: left; }
.kformnext__card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--brand-white) !important;
  padding: clamp(24px, 4vw, 44px) !important;
  border-radius: 24px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28), 0 6px 20px rgba(0, 0, 0, 0.14) !important;
}
/* card ESTÁTICA: es contenedor de form, no una card interactiva. Neutraliza el
   .kcard:hover de landing-konko (translateY + borde dorado) que hacía "saltar"
   y mostrar un recuadro raro al pasar el mouse. */
.kformnext__card:hover {
  transform: none !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28), 0 6px 20px rgba(0, 0, 0, 0.14) !important;
}

.kformnext__placeholder { min-height: 280px; }

.ksection--dark .kformnext__card { background: var(--brand-black-soft) !important; }

/* ─── Dropdown de rangos sobre input text abierto (lo monta module.js) ───
   Card blanca legible sobre cualquier fondo. Sin JS no hay .kdd → queda el
   input de texto normal (progressive enhancement). */
.kdd { position: relative; }
.kdd__trigger {
  display: flex !important; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%; height: 50px; padding: 0 16px;
  font-family: inherit; font-size: 16px; font-weight: 500; /* 16px evita zoom iOS */
  color: #0A0A0A; background: #fff;
  border: 1px solid #E0DCD5; border-radius: 12px;
  cursor: pointer; text-align: left;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.kdd__trigger:hover { border-color: #C9A84C; }
.kdd.kdd--open .kdd__trigger, .kdd__trigger:focus-visible {
  border-color: #C9A84C; box-shadow: 0 0 0 3px rgba(201, 168, 76, .18); outline: none;
}
.kdd__value { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kdd--empty .kdd__value { color: #8a8a8a; }
.kdd__arrow {
  flex: 0 0 auto; width: 16px; height: 16px; transition: transform .2s ease;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231A1712' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.kdd--open .kdd__arrow { transform: rotate(180deg); }
/* Panel IN-FLOW (no absolute): empuja el contenido hacia abajo en vez de flotar,
   así el popup/modal hace scroll y NO se recortan las opciones (antes absolute →
   se cortaba dentro del modal de altura fija). */
.kdd__panel {
  display: none; margin-top: 8px; width: 100%;
  max-height: 210px; overflow-y: auto; /* ~4 opciones visibles + scroll interno → los botones nav quedan a la vista */
  padding: 8px; background: #fff; border: 1px solid #E0DCD5; border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}
.kdd--open .kdd__panel { display: block; }
.kdd__opt {
  display: block; width: 100%; margin: 0; padding: 13px 14px; text-align: left;
  font-family: inherit; font-size: 16px; font-weight: 500; color: #333;
  background: transparent; border: 0; border-radius: 8px; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.kdd__opt:hover { background: rgba(201, 168, 76, .10); }
.kdd__opt[aria-selected="true"] { background: rgba(201, 168, 76, .14); color: #0A0A0A; font-weight: 600; }

/* ─── Opciones verticales tipo Typeform (kdd--cards) ───
   Reemplaza el dropdown en listas cortas: cards apiladas, letra A/B/C,
   selección con borde dorado. */
.kdd--cards { position: relative; }
.kdd__cards { display: flex; flex-direction: column; gap: clamp(6px, 0.9vh, 10px); max-width: 480px; }
.kdd__card {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: clamp(8px, 1.1vh, 14px) 16px; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 500; color: #0A0A0A;
  background: #F5F4F2; border: 1.5px solid transparent; border-radius: 12px;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.kdd__card:hover { background: #EFEDE9; border-color: #E0DCD5; }
.kdd__card:focus-visible { outline: none; border-color: #C9A84C; box-shadow: 0 0 0 3px rgba(201,168,76,.18); }
.kdd__card-key {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px; background: #fff;
  border: 1px solid #E0DCD5; font-size: 12px; font-weight: 600; color: #6b6b6b;
}
.kdd__card-label { flex: 1 1 auto; }
.kdd__card.is-sel { background: rgba(201,168,76,.12); border-color: #C9A84C; }
.kdd__card.is-sel .kdd__card-key { background: #C9A84C; border-color: #C9A84C; color: #0A0A0A; }

/* Nav del form (Anterior/Continuar): en pasos que llenan el viewport el nav se
   pinnea al fondo (margin-top:auto) y queda pegado al borde → le damos aire.
   Aplica a TODOS los forms (SEM, demo, webinar, website, probar-kora, diagnóstico). */
.hsfc-NavigationRow { margin-bottom: clamp(28px, 7vh, 72px); }

/* ─── Override embed (Lovable): cards kdd = mismo look que las radio/checkbox
   cards nativas del theme (konko-hsfc-form-theme.css) — grid 2 col, card
   blanca borde cálido, chip dorado, seleccionada tinte dorado + ✓. ─── */
.kdd__cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)) !important;
  gap: 8px !important;
  max-width: none !important;
}
@media (max-width: 520px) {
  .kdd__cards { grid-template-columns: 1fr !important; }
}
.kdd__card {
  gap: 10px;
  min-height: 58px;
  padding: 8px 12px;
  background: #FFFFFF;
  border: 1px solid #D9D2C4;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.25;
}
.kdd__card:hover { border-color: #C9A84C; background: #FDFBF5; }
.kdd__card-key {
  width: 22px; height: 22px;
  border: 1px solid #C9A84C;
  border-radius: 4px;
  background: #FBF7EE;
  font-size: 11px; font-weight: 700; color: #0A0A0A;
}
.kdd__card.is-sel {
  background: #FAF3E1;
  border-color: #C9A84C;
  box-shadow: inset 0 0 0 1px #C9A84C;
}
.kdd__card.is-sel .kdd__card-key { background: #C9A84C; border-color: #C9A84C; color: #FFFFFF; }
.kdd__card.is-sel::after { content: '✓'; margin-left: auto; font-weight: 700; color: #A07830; }