/* Skin de Fluent Forms 1:1 con el prototipo. Cada formulario se estila por una CLASE que lleva el
   PROPIO form (cb-levelform, cb-newsletter, vía el className del bloque -> css_classes del <form>),
   NO por su ubicación en la página. Así se ve igual en la web y en el editor de páginas (Gutenberg
   pinta el form real por serverSideRender) y es reutilizable. Sin !important: ganamos a la CSS de FF
   por especificidad (FF usa selectores de peso bajo/medio y este archivo carga después). La COLOCACIÓN
   de cada form dentro de su sección (grid del levelbar, separación del newsletter) sí es CSS de página. */

/* ============ Reset común de cualquier form FF ============ */
.frm-fluent-form fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.frm-fluent-form .ff_screen_reader_title { position: absolute; }
.frm-fluent-form .ff-el-is-required.asterisk-right label::after,
.frm-fluent-form .ff-el-is-required .ff-el-is-required-symbol { content: none; }

/* ============ Newsletter (cb-newsletter): email + botón "Apuntarme", centrado = .news__form ============ */
.cb-newsletter fieldset { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.cb-newsletter .ff-el-group:has(.ff-el-form-control) { margin: 0; padding: 0; flex: 1 1 240px; }
.cb-newsletter .ff-el-group:has(.ff-el-form-control) > .ff-el-input--label { display: none; }
.cb-newsletter .ff-el-group:has(.ff-el-form-control) > .ff-el-input--content { margin: 0; padding: 0; width: 100%; }
.cb-newsletter .ff-el-form-control {
  width: 100%; padding: 1em 1.1em; border: var(--rule) solid var(--ink);
  font-family: var(--font-body); font-size: var(--fs-base); background: #fff; color: var(--fg);
}
.cb-newsletter .ff_submit_btn_wrapper { margin: 0; padding: 0; }
.cb-newsletter .ff-btn-submit { /* = .btn.btn--spark.btn--lg */
  font-family: var(--font-mono); font-weight: 600; line-height: 1; font-size: var(--fs-base);
  letter-spacing: 0.04em; text-transform: uppercase; padding: 1.1em 1.8em;
  border: var(--rule) solid var(--ink); border-radius: 0; background: var(--spark-ink); color: #fff;
  cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
}
.cb-newsletter .ff-btn-submit:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-btn-hover); }
/* Colocación en la sección #news (separación del copy de arriba) = CSS de página */
.news .fluentform { margin-top: var(--space-3); }

/* En el tile del blog el form se apila y el botón ocupa el ancho (= .news-tile .news-form del proto).
   Solo a >=760px: por debajo el proto lo deja inline (input+botón al lado), = fieldset base. */
@media (min-width: 760px) {
  .news-tile .cb-newsletter fieldset { flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .news-tile .cb-newsletter .ff-el-group:has(.ff-el-form-control) { flex: none; }
  .news-tile .cb-newsletter .ff_submit_btn_wrapper,
  .news-tile .cb-newsletter .ff-btn-submit { width: 100%; }
  .news-tile .cb-newsletter .ff-btn-submit { justify-content: center; }
}

/* ============ Modal "Únete al club" (cb-joinform): campos con label + select + botón spark-lg = .join-form ============ */
.cb-joinform fieldset { display: grid; gap: var(--space-2); }
.cb-joinform .ff-el-group { margin: 0; padding: 0; display: grid; gap: 0.3rem; }
/* FF pone ::before/::after (clearfix del float) que en grid se cuelan como filas vacías (+9.6px) */
.cb-joinform .ff-el-group::before, .cb-joinform .ff-el-group::after { content: none; }
/* FF flota el label a la izquierda con width:180px; lo devolvemos a bloque full-width apilado (label arriba) */
.cb-joinform .ff-el-input--label { margin: 0; padding: 0; float: none; width: 100%; text-align: left; }
.cb-joinform .ff-el-input--label label {
  display: block; /* como bloque el div se ajusta al texto (FF lo deja inline-block en una caja de 26px); line-height hereda 1.55 = proto */
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gray-700);
}
/* Ocultar el asterisco de required (el prototipo no lo muestra); FF lo pone con (0,4,2), igualamos scope */
.cb-joinform .ff-el-input--label.ff-el-is-required.asterisk-right label::after,
.cb-joinform .ff-el-input--label.ff-el-is-required.asterisk-left label::before { content: none; }
.cb-joinform .ff-el-input--content { margin: 0; padding: 0; width: 100%; }
.cb-joinform .ff-el-form-control {
  width: 100%; padding: 0.8em 0.9em; border: var(--rule) solid var(--ink);
  font-family: var(--font-body); font-size: var(--fs-base); background: #fff; color: var(--fg);
}
.cb-joinform .ff_submit_btn_wrapper { margin: 0; padding: 0; }
.cb-joinform .ff-btn-submit { /* = .btn.btn--spark.btn--lg */
  font-family: var(--font-mono); font-weight: 600; line-height: 1; font-size: var(--fs-base);
  letter-spacing: 0.04em; text-transform: uppercase; padding: 1.1em 1.8em;
  border: var(--rule) solid var(--ink); border-radius: 0; background: var(--spark-ink); color: #fff;
  cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
}
.cb-joinform .ff-btn-submit:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-btn-hover); }
/* Colocación en el modal: separación del subtítulo (= .join-form margin-top) = CSS de página */
.modal .fluentform { margin-top: var(--space-3); }

/* ============ Levelbar (cb-levelform): nivel (radios-tarjeta) + captura (email + botón) ============ */
.cb-levelform fieldset { display: grid; gap: var(--space-3); }
.cb-levelform .ff-message-success,
.cb-levelform .ff-el-group.ff-el-form-hide { display: none; }

/* --- Grupo del radio de nivel = .levels-quick --- */
.cb-levelform .ff-el-group:has(.ff-el-form-check) { margin: 0; padding: 0; }
.cb-levelform .ff-el-group:has(.ff-el-form-check) > .ff-el-input--label { display: none; } /* sin label "Tu nivel" */
.cb-levelform .ff-el-group:has(.ff-el-form-check) .ff-el-input--content {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin: 0; padding: 0;
}
@media (min-width: 720px) { /* mismo breakpoint que .levels-quick del prototipo */
  .cb-levelform .ff-el-group:has(.ff-el-form-check) .ff-el-input--content { grid-template-columns: repeat(4, 1fr); }
}
.cb-levelform .ff-el-form-check { margin: 0; padding: 0; }
/* cada opción = tarjeta .lvl */
.cb-levelform .ff-el-form-check-label {
  display: flex; flex-direction: column; gap: 2px; margin: 0;
  padding: 0.8rem 1rem; border: var(--rule) solid var(--ink); background: #fff; color: var(--fg);
  cursor: pointer; text-align: left; line-height: normal; /* como el <button> .lvl del proto (no hereda 1.55) */
  transition: transform .1s ease, box-shadow .1s ease;
}
.cb-levelform .ff-el-form-check-label:hover,
.cb-levelform .ff-el-form-check-label:has(.ff-el-form-check-input:checked) {
  transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink);
}
.cb-levelform .ff-el-form-check-label:has(.ff-el-form-check-input:checked) { background: var(--green-tint); }
/* FF pone margin-bottom:7px en el label (0,3,1); igualamos especificidad para ganarle */
.cb-levelform .ff-el-form-check label.ff-el-form-check-label { margin: 0; }
/* radio oculto FUERA del flujo flex (si no, su gap de 2px estira la tarjeta); FF lo fija relative (0,3,0) */
.cb-levelform .ff-el-form-check-label .ff-el-form-check-input { position: absolute; top: 0; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
/* el <span> que FF envuelve alrededor de <b> + .lvl__d se "desenvuelve" para que sean hijos flex directos */
.cb-levelform .ff-el-form-check-label > span { display: contents; }
.cb-levelform .ff-el-form-check-label b { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.cb-levelform .lvl__d { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); }

/* --- Grupo del email + botón = .capture --- */
.cb-levelform .ff-el-group:has(.ff-el-form-control) { margin: 0; padding: 0; } /* el email va solo; sin flex/gap */
.cb-levelform .ff-el-group:has(.ff-el-form-control) > .ff-el-input--label { display: none; } /* sin label "Email" */
.cb-levelform .ff-el-group:has(.ff-el-form-control) > .ff-el-input--content { margin: 0; padding: 0; width: 100%; }
.cb-levelform .ff-el-form-control {
  width: 100%; padding: 0.9em 1.1em; border: var(--rule) solid var(--ink);
  font-family: var(--font-body); font-size: var(--fs-base); background: #fff; color: var(--fg);
}
/* botón submit = .btn.btn--spark */
.cb-levelform .ff_submit_btn_wrapper { margin: 0; padding: 0; }
.cb-levelform .ff-btn-submit {
  font-family: var(--font-mono); font-weight: 600; line-height: 1; font-size: var(--fs-sm);
  letter-spacing: 0.04em; text-transform: uppercase; padding: 0.95em 1.5em;
  border: var(--rule) solid var(--ink); border-radius: 0; background: var(--spark-ink); color: #fff;
  cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
}
.cb-levelform .ff-btn-submit:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-btn-hover); }

/* email full-width + botón al lado desde 480; tarjetas full-width arriba */
@media (min-width: 480px) {
  .cb-levelform fieldset { grid-template-columns: 1fr auto; align-items: start; column-gap: var(--space-2); }
  .cb-levelform .ff-el-group:has(.ff-el-form-check) { grid-column: 1 / -1; }
  .cb-levelform .ff-el-group:has(.ff-el-form-control) { grid-column: 1; }
  .cb-levelform .ff_submit_btn_wrapper { grid-column: 2; }
}
/* A <480 email y botón se apilan; el .capture del proto los envuelve con gap space-2 (no space-3) */
@media (max-width: 479px) {
  .cb-levelform .ff_submit_btn_wrapper { margin-top: calc(var(--space-2) - var(--space-3)); }
}

/* ============ Colocación del levelbar en su sección (grid h2 | form) = CSS de página ============ */
@media (min-width: 940px) {
  .levelbar__inner:has(.frm-fluent-form) > .levelbar__head { grid-column: 1; grid-row: auto; align-self: center; }
  .levelbar__inner > .fluentform { grid-column: 2; align-self: center; }
}
/* Subtítulo del levelbar como párrafo nativo (antes <small> dentro del h2): reproduce su estilo 1:1 */
.levelbar__sub {
  font-family: var(--font-body); font-size: 1rem; font-weight: 500; line-height: 1.4;
  letter-spacing: 0; text-transform: none; color: #fff; margin-top: var(--space-2); max-width: 34ch;
}