/* ==========================================================================
   EmpowerLink · Formularios
   Usa los mismos tokens de :root que ya define cada pagina, con respaldos por
   si la hoja se carga en un contexto donde no esten declarados.
   ========================================================================== */

.elform {
  background: var(--paper, #fff);
  border: 1px solid var(--line, #E4E2EE);
  border-radius: var(--r-lg, 18px);
  padding: 34px 32px;
  box-shadow: 0 22px 55px -26px rgba(28, 30, 68, .24);
}

.elform-head { margin-bottom: 26px; }

.elform-head h3 {
  font-family: var(--font-d, Georgia, serif);
  font-weight: 600;
  font-size: clamp(21px, 2.4vw, 27px);
  line-height: 1.18;
  color: var(--ink, #14163A);
  margin: 0 0 8px;
}

.elform-head p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--soft, #54579B);
  margin: 0;
}

.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fgroup { display: flex; flex-direction: column; margin-bottom: 16px; }
/* display:flex le gana al hidden del navegador; sin esto un campo oculto
   sigue visible y, si es required, bloquea el envio en silencio */
.fgroup[hidden] { display: none; }
.fgroup.full { grid-column: 1 / -1; }

.fgroup label {
  font-family: var(--font-b, system-ui, sans-serif);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink, #14163A);
  margin-bottom: 7px;
}

.fgroup label .req { color: var(--accent-em, #BD6C24); margin-left: 3px; }

.fgroup input,
.fgroup select,
.fgroup textarea {
  font-family: var(--font-b, system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.45;
  color: var(--text, #1C1E44);
  background: #fff;
  border: 1.5px solid var(--line, #E4E2EE);
  border-radius: 11px;
  padding: 13px 15px;
  width: 100%;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}

.fgroup textarea { min-height: 118px; resize: vertical; }

.fgroup select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2354579B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 15px;
  padding-right: 40px;
  cursor: pointer;
}

.fgroup input::placeholder,
.fgroup textarea::placeholder { color: #9a9cb8; }

.fgroup input:focus,
.fgroup select:focus,
.fgroup textarea:focus {
  outline: none;
  border-color: var(--brand, #4A4FA0);
  box-shadow: 0 0 0 3.5px rgba(74, 79, 160, .14);
}

.fgroup input.is-bad,
.fgroup input.is-bad:focus {
  border-color: #C0392B;
  box-shadow: 0 0 0 3.5px rgba(192, 57, 43, .13);
}

.fgroup input.is-good {
  border-color: #2E8B57;
  box-shadow: 0 0 0 3.5px rgba(46, 139, 87, .12);
}

.fhint {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--soft, #54579B);
  margin: 6px 0 0;
}

.fmsg { font-size: 13px; line-height: 1.45; margin: 7px 0 0; min-height: 0; }
.fmsg.is-error { color: #C0392B; font-weight: 600; }
.fmsg.is-warn { color: var(--accent-em, #BD6C24); }

.fcheck {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.5;
  color: #4a4c66;
  margin: 4px 0 20px;
}

.fcheck input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: var(--brand, #4A4FA0);
  cursor: pointer;
}

.fcheck a { color: var(--accent-deep, #9C612C); text-decoration: underline; text-underline-offset: 2px; display: inline-block; padding: 3px 0; }

.elform .btn { width: 100%; justify-content: center; }

.elform-foot {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--soft, #54579B);
  margin: 16px 0 0;
  text-align: center;
}

/* Fila de confianza bajo el boton de enviar */
.elform-trust {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px dashed var(--line, #E4E2EE);
}
.elform-trust li {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--soft, #54579B);
  position: relative;
  padding-left: 18px;
}
.elform-trust li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: #2E8B57;
  font-weight: 700;
}

/* Aviso de "solo correo corporativo" arriba del formulario */
.corp-note {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  background: rgba(224, 140, 64, .09);
  border: 1px solid rgba(224, 140, 64, .3);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 24px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #4a4c66;
}

.corp-note svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  margin-top: 1px;
  stroke: var(--accent-em, #BD6C24);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.corp-note strong { color: var(--ink, #14163A); }

/* El honeypot antispam: invisible para personas, visible para bots */
.hpot { position: absolute !important; left: -9999px !important; opacity: 0 !important; height: 0 !important; overflow: hidden !important; }

@media (max-width: 620px) {
  .frow { grid-template-columns: 1fr; gap: 0; }
  .elform { padding: 22px 18px; }
  .elform-head { margin-bottom: 18px; }
  .elform-head p { font-size: 14px; }
  .corp-note { padding: 12px 14px; margin-bottom: 18px; font-size: 13px; }
  .fgroup { margin-bottom: 13px; }
  .fcheck { margin: 2px 0 16px; }
  .elform .btn { padding: 17px 22px; }
  .elform-foot { margin: 13px 0 0; font-size: 12px; }
}