/**
 * Hoja de estilos autocontenida del bloque `bantrab/form` (form-frontend-block, AD-2).
 *
 * Reproduce por valor, no por clase, la identidad visual de bantrab/product-form:
 * `themes/bantrab/tailwind.config.js` escanea rutas relativas AL TEMA, así que un
 * archivo del mu-plugin nunca se escanea y una utilidad como `bg-[#FEE227]` jamás
 * se generaría — el bloque se vería sin estilo en producción y bien en cualquier
 * entorno que además tenga corriendo el servidor de desarrollo del tema. Por eso
 * cada valor va literal acá: colores, radios, quiebres.
 *
 * Compartida por el bloque y por el shortcode `[bantrab_form]`: ambos renderizan
 * el mismo marcado (`Bantrab_Form_Render`), así que comparten la misma hoja — ver
 * el enqueue explícito en `Bantrab_Form_Render::enqueue()`.
 *
 * @package BantrabForms
 */

.bantrab-form-block {
	/* Colores que no vienen de la tarjeta de paridad (foco, error, ayuda): se
	   miden acá porque no tienen equivalente en bantrab/product-form, que no
	   necesita distinguir un estado de error. Las relaciones de contraste ya
	   documentadas en assets/css/frontend.css se conservan sobre estos mismos
	   dos colores; el resto de la paleta (amarillo de tarjeta, foco teal) viene
	   directamente de la referencia de Figma ya aprobada para product-form y no
	   se vuelve a derivar acá. */
	--bantrab-form-danger: #b32d2e; /* 6.30:1 sobre blanco */
	--bantrab-form-muted: #6b7280;
	--bantrab-form-text: #424643;
	--bantrab-form-text-soft: #535754;
	--bantrab-form-placeholder: #9ca3af;
	--bantrab-form-border: #d1d5db;
	--bantrab-form-focus: #00a99d;
	--bantrab-form-focus-hover: #008b7f;
	--bantrab-form-card: #fee227;
	--bantrab-form-gap: 16px;

	/* Ancho útil de la tarjeta entre 768px y 1279px, el tramo en el que la
	   columna de texto todavía no se puso al lado del formulario. TODO lo que
	   se ve en ese tramo —título, bajada, campos, barra de progreso, encabezado
	   y ayuda del separador, y la navegación de pasos— se acota a esta medida y
	   se centra, así el bloque entero se lee sobre un mismo eje.

	   Vive en una variable y no repetido en cada regla porque el valor es una
	   decisión única: si mañana cambia, tiene que cambiar para todos a la vez o
	   vuelve la desalineación que esto existe para arreglar. El número sale de
	   `product-form/render.php:252` (`md:max-w-[674px] md:mx-auto`). */
	--bantrab-form-inner: 674px;
}

/* ---------- Estructura: sección, contenedor, tarjeta ---------- */

/* La sección que envuelve todo: separa la tarjeta del borde de la pantalla y la
   apoya sobre el gris del sitio. Valores de
   `product-form/render.php:218` (`py-8 xl:py-16 px-6 md:px-8 xl:px-12
   bg-[#F6F7F7]`). Sin esto la tarjeta amarilla llega pegada al borde en móvil,
   que es la diferencia que se ve al comparar los dos formularios lado a lado. */
.bantrab-form-block {
	padding: 32px 24px;
	background: #f6f7f7;
}

@media ( min-width: 768px ) {
	.bantrab-form-block {
		padding-left: 32px;
		padding-right: 32px;
	}
}

@media ( min-width: 1280px ) {
	.bantrab-form-block {
		padding: 64px 48px;
	}
}

.bantrab-form-block__container {
	max-width: 1344px;
	margin-left: auto;
	margin-right: auto;
}

.bantrab-form-block__card {
	background: var( --bantrab-form-card );
	border-radius: 32px;
	padding: 64px 24px;
}

@media ( min-width: 768px ) {
	.bantrab-form-block__card {
		padding: 56px 48px;
	}
}

@media ( min-width: 1280px ) {
	.bantrab-form-block__card {
		border-radius: 48px;
		padding: 72px 48px;
	}
}

.bantrab-form-block__inner {
	display: flex;
	flex-direction: column;
}

@media ( min-width: 1280px ) {
	.bantrab-form-block__inner {
		flex-direction: row;
		gap: 48px;
	}
}

/* ---------- Columna de copy: título y bajada del formulario ---------- */

.bantrab-form-block__copy {
	margin-bottom: 48px;
}

@media ( min-width: 1280px ) {
	.bantrab-form-block__copy {
		width: 40%;
		margin-bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/* El título y la bajada se acotan a 720px y se CENTRAN mientras la columna de
   texto ocupa todo el ancho de la tarjeta. Desde 1280 esa columna pasa a ser el
   40% de la izquierda, así que el centrado se suelta y el texto se alinea con
   el borde. Valores de `product-form/render.php:224` y `:229`
   (`max-w-[720px] mx-auto xl:mx-[unset]`).

   Ojo: estos 720px NO son el ancho efectivo en todo el rango. Entre 768px y
   1279px la regla agrupada del tramo 768-1279, más abajo en esta hoja, los baja a `--bantrab-form-inner`
   para que el título quede sobre el mismo eje que los campos. Acá se conserva
   el valor de paridad porque es el que vuelve a mandar desde 1280. */
.bantrab-form-block__heading {
	margin: 0 auto 24px;
	color: var( --bantrab-form-text );
	font-size: 24px;
	font-weight: 700;
	line-height: 28px;
	max-width: 720px;
}

@media ( min-width: 768px ) {
	.bantrab-form-block__heading {
		font-size: 40px;
		font-weight: 800;
		line-height: 120%;
	}
}

@media ( min-width: 1280px ) {
	.bantrab-form-block__heading {
		margin-left: 0;
		margin-right: 0;
		font-size: 56px;
		line-height: 68px;
	}
}

.bantrab-form-block__subheading {
	margin: 0 auto;
	color: var( --bantrab-form-text );
	font-size: 16px;
	font-weight: 600;
	line-height: 140%;
	max-width: 720px;
}

@media ( min-width: 768px ) {
	.bantrab-form-block__subheading {
		color: var( --bantrab-form-text-soft );
		font-size: 20px;
		font-weight: 500;
		line-height: 24px;
	}
}

@media ( min-width: 1280px ) {
	.bantrab-form-block__subheading {
		margin-left: 0;
		margin-right: 0;
		font-size: 28px;
		font-weight: 600;
		line-height: 100%;
	}
}

/* ---------- Columna del formulario ---------- */

.bantrab-form-block__form-col {
	position: relative;
}

@media ( min-width: 1280px ) {
	.bantrab-form-block__form-col {
		width: 60%;
	}
}

.bantrab-form-block__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

@media ( min-width: 1280px ) {
	.bantrab-form-block__form {
		gap: 20px;
	}
}

/* ---------- Cuadrícula de campos: 1 o 2 columnas, con huérfano centrado (AD-7) ---------- */

.bantrab-form-block__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --bantrab-form-gap );
}

/* Entre 768px y 1279px la rejilla se acota y se centra. Es el tramo en el que
   la tarjeta ya es ancha pero la columna de texto todavía no se puso al lado
   —eso pasa recién en 1280—, así que sin tope los campos se estiran a todo el
   ancho de la tarjeta y quedan desproporcionados. Valor de
   `product-form/render.php:252` (`md:max-w-[674px] md:mx-auto`). */
@media ( min-width: 768px ) {
	.bantrab-form-block__grid {
		/* `width: 100%` no sobra: la rejilla es un hijo flex de
		   `.bantrab-form-block__form`, que es `flex-direction: column`, y poner
		   márgenes automáticos en el eje cruzado desactiva el `align-items:
		   stretch` que traía por omisión. Sin recuperar el ancho a mano, el
		   elemento se dimensiona por su contenido y el tope de 674px no llega a
		   aplicarse nunca. En el bloque de referencia no hace falta porque allá
		   la rejilla no vive dentro de un contenedor flex. */
		width: 100%;
		max-width: var( --bantrab-form-inner );
		margin-left: auto;
		margin-right: auto;
	}
}

/* Desde 1280 el tope se suelta: la rejilla ya vive dentro del 60% de la tarjeta
   y es esa columna la que le pone el límite (`xl:max-w-[unset] xl:mx-[unset]`). */
@media ( min-width: 1280px ) {
	.bantrab-form-block__grid {
		--bantrab-form-gap: 20px;

		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}
}

/* El quiebre a dos columnas converge con bantrab/product-form (`sm:grid-cols-2`,
   640px) y no con los 600px que usaba este módulo antes de la paridad — la
   diferencia de 40px es intencional (AD-7). Un formulario en 1 columna nunca
   entra acá: la regla de huérfano queda inerte porque no hay corrida que romper. */
@media ( min-width: 640px ) {
	.bantrab-form-block__grid[data-columns="2"] {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	/* Server-side marking, CSS-side styling (AD-7): PHP ya decidió qué campo es
	   el huérfano de su corrida — acá solo se centra y se le da el ancho de una
	   columna. Pura CSS no puede decidir esto: `:nth-last-child` cuenta todos los
	   hermanos, y un campo `full` o un `section` cierran la corrida a mitad de
	   camino, así que la paridad es por corrida y no global. */
	.bantrab-form-block__grid[data-columns="2"] .bantrab-form-block__field--orphan {
		grid-column: 1 / -1;
		justify-self: center;
		width: calc( 50% - ( var( --bantrab-form-gap ) / 2 ) );
	}
}

.bantrab-form-block__field {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.bantrab-form-block__field--full {
	grid-column: 1 / -1;
}

/* Consentimiento y verificación anti-spam (`full_width` en el catálogo de
   tipos). Ninguno de los dos se completa escribiendo: uno es una línea de texto
   con un enlace y el otro un recuadro de tamaño fijo que decide Google, así que
   alineados a la izquierda quedaban descolgados contra media fila vacía.

   El centrado va en el CONTENEDOR y no en cada control, que es lo que se
   intentó primero y dejó la descripción pegada a la izquierda mientras el
   control ya estaba centrado. El contenedor es una columna flex, así que
   `align-items: center` alcanza a todo lo que cuelga de él —control,
   descripción y hueco de error— de una sola vez; el `text-align` es para el
   texto de la descripción, que ocupa varias líneas y no se centra solo por
   estar en una caja centrada. */
.bantrab-form-block__field--centered {
	align-items: center;
	text-align: center;
}

/* ---------- Etiquetas fijas (grupos, textarea, select) ---------- */

/* Traducción literal de las clases que usa bantrab/product-form para una
   etiqueta fija sobre un control (render.php:355): `block text-[#424643]
   text-[14px] xl:text-[16px] font-[600] mb-2`. El `<legend>` de un grupo de
   opciones cumple el mismo rol visual —una etiqueta fija sobre su control—
   así que comparte la misma regla; solo agrega el reset de `padding` que
   necesita por ser un `<legend>`. */
.bantrab-form-block__label,
.bantrab-form-block__legend {
	display: block;
	margin-bottom: 8px; /* mb-2 */
	color: var( --bantrab-form-text );
	font-size: 14px;
	font-weight: 600;
}

@media ( min-width: 1280px ) {
	.bantrab-form-block__label,
	.bantrab-form-block__legend {
		font-size: 16px; /* xl:text-[16px] */
	}
}

.bantrab-form-block__required {
	color: var( --bantrab-form-danger );
}

/* ---------- Controles: cápsula blanca, etiqueta flotante ---------- */

.bantrab-form-block__capsule {
	position: relative;
}

.bantrab-form-block__control,
.bantrab-form-block__control--textarea,
.bantrab-form-block__control--select,
.bantrab-form-block__capsule input,
.bantrab-form-block__capsule select {
	width: 100%;
	padding: 24px 16px 8px;
	border-radius: 12px;
	border: 2px solid transparent;
	background: #fff;
	color: var( --bantrab-form-text-soft );
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 21px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

@media ( min-width: 1024px ) {
	.bantrab-form-block__control,
	.bantrab-form-block__capsule input,
	.bantrab-form-block__capsule select {
		padding-left: 24px;
		padding-right: 24px;
	}
}

.bantrab-form-block__control:hover,
.bantrab-form-block__capsule input:hover,
.bantrab-form-block__capsule select:hover {
	background: #f0f0f0;
}

.bantrab-form-block__control:focus,
.bantrab-form-block__capsule input:focus,
.bantrab-form-block__capsule select:focus {
	outline: none;
	border-color: var( --bantrab-form-focus );
	background: #fff;
}

.bantrab-form-block__control--textarea {
	resize: vertical;
	min-height: 112px;
	padding-top: 12px;
}

/* Selector: la etiqueta va DENTRO del control y la flecha se dibuja a mano.
   Valores tomados de `product-form/render.php:297-328` y de
   `product-form/style.css:39-54`.

   La única diferencia deliberada con la referencia: allá el envoltorio lleva
   `md:max-w-[325px] md:mx-auto`, que fija el ancho del selector sin importar el
   espacio disponible. Acá no, porque el ancho ya lo decide el campo con su
   `full` o `half`, igual que cualquier otro control. */

.bantrab-form-block__select-wrap {
	position: relative;
	width: 100%;
}

.bantrab-form-block__control--select {
	/* Sin esto el navegador pinta su propia flecha, con el color del sistema. */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	/* Espacio a la derecha para que el texto no pase por debajo de la flecha. */
	padding-right: 40px;
}

.bantrab-form-block__select-label {
	position: absolute;
	top: 10px;
	left: 16px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	color: var( --bantrab-form-placeholder );
	/* La etiqueta se dibuja encima del control: sin esto, un clic sobre ella
	   no abriría el desplegable. */
	pointer-events: none;
}

.bantrab-form-block__select-arrow {
	position: absolute;
	top: 50%;
	right: 16px;
	display: flex;
	transform: translateY( -50% );
	pointer-events: none;
}

@media ( min-width: 1024px ) {
	.bantrab-form-block__select-label {
		left: 24px;
	}
}

@media ( min-width: 1280px ) {
	.bantrab-form-block__control--select {
		padding-right: 48px;
	}

	.bantrab-form-block__select-arrow {
		right: 24px;
	}
}

/* ---------- Desplegable propio del selector ----------

   El control cerrado ya se veía como el resto del formulario, pero la lista de
   opciones la pintaba el sistema operativo: tipografía, colores y alto de fila
   ajenos a la marca, y sin ninguna forma de buscar cuando las opciones son
   muchas. Estas reglas son el panel que `frontend.js` monta en su lugar,
   portado del desplegable de los cotizadores (`cot-dropdown`, en
   `themes/bantrab/assets/src/css/cotizadores.css`).

   Se porta y no se reutiliza aquella hoja a propósito: vive en el tema, y este
   formulario es un mu-plugin que se dibuja igual en una página que no cargue
   ningún cotizador. Depender de sus clases sería un módulo que se ve bien solo
   por casualidad. */

/* El `<select>` real no se esconde: se vuelve transparente y se estira sobre el
   disparador. Tiene que seguir ocupando su lugar para que el globo de
   validación del navegador aparezca sobre el campo y no en un rincón de la
   página; `display: none` lo sacaría de la maqueta y el aviso se iría con él.
   `pointer-events: none` deja pasar el clic al disparador, y el `tabindex="-1"`
   que le pone el guion lo saca del recorrido de tabulación: quien navega con
   teclado llega al disparador, que es el que sabe abrirse.

   El selector nombra al elemento `select` a propósito: el disparador lleva las
   mismas clases de control para heredar su caja, así que un selector por clase
   lo alcanzaría también y lo volvería invisible junto con el control real. */
.bantrab-form-block__select-wrap.is-enhanced select.bantrab-form-block__control--select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
}

/* Hereda del control su caja entera —alto, relleno, radio, borde de error— para
   que un retoque al aspecto del campo no deje a este a medio camino. El
   `box-sizing` va explícito porque el `<select>` al que reemplaza lo traía del
   navegador y un `<button>` no siempre: sin esto, el relleno se sumaría al 100%
   de ancho y el control se saldría de su columna. */
.bantrab-form-block__select-trigger {
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	box-sizing: border-box;
	text-align: left;
	cursor: pointer;
	overflow: hidden;
}

.bantrab-form-block__select-trigger-value {
	display: block;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Sin selección todavía: el texto es el marcador de posición, no un valor. */
.bantrab-form-block__select-trigger--empty .bantrab-form-block__select-trigger-value {
	color: var( --bantrab-form-placeholder );
}

.bantrab-form-block__select-trigger[aria-expanded="true"] {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.bantrab-form-block__select-wrap.is-open .bantrab-form-block__select-arrow {
	transform: translateY( -50% ) rotate( 180deg );
}

.bantrab-form-block__select-arrow {
	transition: transform 0.2s ease;
}

.bantrab-form-block__select-panel {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 49;
	overflow: hidden;
	background: #f6f7f7;
	border-radius: 0 0 12px 12px;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.08 );
}

.bantrab-form-block__select-search-wrap {
	position: relative;
	padding: 12px 12px 8px;
}

.bantrab-form-block__select-search {
	width: 100%;
	height: 44px;
	padding: 12px 44px 12px 16px;
	border: none;
	border-radius: 9999px;
	background: #eceef0;
	color: var( --bantrab-form-text-soft );
	font: inherit;
	font-size: 16px;
	box-sizing: border-box;
}

.bantrab-form-block__select-search::placeholder {
	color: #6e7191;
	font-weight: 500;
	line-height: 21px;
}

.bantrab-form-block__select-search:focus-visible {
	outline: 2px solid var( --bantrab-form-focus );
	outline-offset: -2px;
}

.bantrab-form-block__select-search-icon {
	position: absolute;
	top: 50%;
	right: 24px;
	transform: translateY( -50% ) translateY( 2px );
	pointer-events: none;
}

/* `direction: rtl` corre la barra de desplazamiento al borde izquierdo del
   panel, que es donde la quiere el diseño; cada opción vuelve a `ltr` para que
   su texto se lea normal. Mismo truco que el desplegable de los cotizadores. */
.bantrab-form-block__select-list {
	max-height: 218px;
	margin: 0;
	padding: 4px 0 8px;
	overflow-y: auto;
	direction: rtl;
	list-style: none;
	scrollbar-width: thin;
	scrollbar-color: #d9dde0 #eceef0;
}

.bantrab-form-block__select-list::-webkit-scrollbar {
	width: 7px;
}

.bantrab-form-block__select-list::-webkit-scrollbar-track {
	background: #eceef0;
}

.bantrab-form-block__select-list::-webkit-scrollbar-thumb {
	border-radius: 9999px;
	background: #d9dde0;
}

.bantrab-form-block__select-option {
	direction: ltr;
	padding: 10px 16px;
	color: var( --bantrab-form-text-soft );
	font-size: 16px;
	line-height: 129%;
	cursor: pointer;
	text-align: left;
}

.bantrab-form-block__select-option:hover,
.bantrab-form-block__select-option[aria-selected="true"] {
	background: #eceef0;
}

/* La opción bajo el cursor del teclado. Lleva contorno además del fondo: con
   solo el fondo, quien navega con flechas no distingue dónde está parado de
   cuál está elegida, porque las dos se pintarían igual. */
.bantrab-form-block__select-option--cursor {
	background: #eceef0;
	outline: 2px solid var( --bantrab-form-focus );
	outline-offset: -2px;
}

.bantrab-form-block__select-option[hidden] {
	display: none;
}

.bantrab-form-block__select-empty {
	margin: 0;
	padding: 16px;
	color: var( --bantrab-form-text-soft );
	font-size: 16px;
	line-height: 129%;
	text-align: center;
	white-space: pre-line;
}

@media ( max-width: 767px ) {
	.bantrab-form-block__select-option {
		padding: 16px;
	}
}

.bantrab-form-block__field.has-error .bantrab-form-block__control,
.bantrab-form-block__field.has-error .bantrab-form-block__capsule input,
.bantrab-form-block__field.has-error .bantrab-form-block__capsule select {
	border-color: var( --bantrab-form-danger );
}

/* Etiqueta flotante: vive DESPUÉS del control en el marcado a propósito, para
   poder engancharla con un selector de hermano — el mismo criterio que
   bantrab/product-form (`.product-form-float-label`). El control usa
   `placeholder=" "` (un espacio, nunca vacío), así que `:placeholder-shown`
   sigue reflejando "el campo está vacío" tal como se necesita acá. */
.bantrab-form-block__float-label {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY( -50% );
	font-size: 14px;
	font-weight: 400;
	line-height: 17px;
	color: var( --bantrab-form-placeholder );
	pointer-events: none;
	transition: all 0.15s ease;
}

@media ( min-width: 1024px ) {
	.bantrab-form-block__float-label {
		left: 24px;
	}
}

.bantrab-form-block__capsule input:focus ~ .bantrab-form-block__float-label,
.bantrab-form-block__capsule input:not( :placeholder-shown ) ~ .bantrab-form-block__float-label {
	top: 14px;
	transform: translateY( 0 );
	font-size: 12px;
}

/* ---------- Campo de fecha: calendario propio ----------

   El calendario que dibuja el navegador queda 8px por debajo del centro del
   control, y no por un descuido suyo: la cápsula lleva 24px de relleno arriba y
   8 abajo para hacerle lugar a la etiqueta flotante, así que el icono se centra
   contra un área de contenido que no está centrada en la caja. Medido a 1024px
   antes de este cambio: centro de la caja en 29px, centro del contenido en 37.

   La solución no lo mueve: lo vuelve transparente y lo estira sobre el borde
   derecho, para que siga siendo él quien abre el calendario al hacer clic. El
   icono que se ve es uno propio, decorativo, que no recibe el puntero. Así no
   hace falta `showPicker()` ni ningún guion, y el teclado sigue igual. */

/* El icono propio solo aparece donde se puede esconder el nativo. En un
   navegador sin ese pseudo-elemento —Firefox— la consulta no se cumple, nuestro
   icono no se dibuja y queda el del navegador: preferible a mostrar los dos. */
.bantrab-form-block__date-icon {
	display: none;
}

@supports selector( ::-webkit-calendar-picker-indicator ) {
	.bantrab-form-block__date-icon {
		position: absolute;
		top: 50%;
		right: 16px;
		display: flex;
		transform: translateY( -50% );
		color: var( --bantrab-form-focus );
		pointer-events: none;
	}

	/* Transparente, no escondido: `display: none` le sacaría el clic que abre el
	   calendario, que es justo lo que se quiere conservar. Se estira sobre todo
	   el alto para que el área tocable no dependa del tamaño del dibujo. */
	.bantrab-form-block__control--date::-webkit-calendar-picker-indicator {
		position: absolute;
		top: 0;
		right: 0;
		width: 52px;
		height: 100%;
		margin: 0;
		padding: 0;
		opacity: 0;
		cursor: pointer;
	}

	/* Sin esto el valor quedaría debajo del área tocable del indicador en los
	   campos angostos.

	   El selector nombra la cápsula además de la clase por una cuestión de
	   peso, no de estilo: la regla que fija el relleno lateral desde 1024px
	   apunta a `.bantrab-form-block__capsule input`, que suma una clase y un
	   elemento. Una clase sola pierde contra eso aunque venga después. */
	.bantrab-form-block__capsule input.bantrab-form-block__control--date {
		padding-right: 52px;
	}

	@media ( min-width: 1280px ) {
		.bantrab-form-block__date-icon {
			right: 24px;
		}
	}
}

/* ---------- Grupos de opciones: radio y checkbox (sin referencia visual) ---------- */

/* `radio` y `checkbox` no tienen referencia en bantrab/product-form: se
   componen acá dentro del mismo lenguaje visual (cápsula blanca, borde
   redondeado, acento teal al marcar) — pendiente de validación de diseño, ver
   specs/form-frontend-block. */
.bantrab-form-block__group {
	margin: 0;
	padding: 16px;
	border: 2px solid transparent;
	border-radius: 12px;
	background: #fff;
	min-width: 0;
}

.bantrab-form-block__field.has-error .bantrab-form-block__group {
	border-color: var( --bantrab-form-danger );
}

.bantrab-form-block__legend {
	/* Reset del padding nativo del navegador sobre `<legend>` — el resto de
	   la tipografía la aporta la regla compartida con `__label`, arriba. */
	padding: 0;

	/* Un `<legend>` no se coloca como un bloque más: el navegador lo saca del
	   flujo y lo dibuja SOBRE el borde superior del `<fieldset>`, corriendo el
	   fondo hacia abajo para hacerle lugar. Sobre la cápsula blanca de este
	   grupo eso dejaba el título flotando afuera, contra el amarillo del
	   formulario, en vez de adentro con sus opciones.
	   `float` lo devuelve al flujo normal —es la única vía que respetan todos
	   los navegadores— y el ancho completo lo mantiene en su propia línea. */
	float: left;
	width: 100%;
}

/* El `float` de arriba deja de ocupar altura para su padre: sin esto, las
   opciones treparían encima del título. */
.bantrab-form-block__legend + * {
	clear: both;
}

.bantrab-form-block__choice {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var( --bantrab-form-text-soft );
	font-size: 15px;
	font-weight: 400 !important;
	cursor: pointer;
}

.bantrab-form-block__choice + .bantrab-form-block__choice {
	margin-top: 8px;
}

/* Las casillas de un grupo comparten la caja del consentimiento —misma
   medida, mismo borde, mismo relleno al marcarse— para que marcar una opción
   se vea igual en todo el formulario. Antes eran el control nativo con solo un
   `accent-color`, y contra la casilla dibujada del consentimiento se notaba
   que eran dos cosas distintas.

   Las opciones redondas (`radio`) toman el mismo lenguaje pero CONSERVAN su
   forma y su punto central. Cuadrar un `radio` diría «podés marcar varias»
   cuando solo se puede una, y la forma del control es lo primero que alguien
   lee para saber eso — antes que cualquier texto de ayuda. */
.bantrab-form-block__choice input[type="radio"],
.bantrab-form-block__choice input[type="checkbox"],
.bantrab-form-block__consent-input {
	position: relative;
	flex-shrink: 0;
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 2px solid var( --bantrab-form-border );
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.bantrab-form-block__choice input[type="radio"] {
	border-radius: 50%;
}

.bantrab-form-block__choice input[type="radio"]:checked,
.bantrab-form-block__choice input[type="checkbox"]:checked,
.bantrab-form-block__consent-input:checked {
	background: var( --bantrab-form-focus );
	border-color: var( --bantrab-form-focus );
}

/* Marca de verificación dibujada en CSS puro — sin SVG embebido, que en
   PHP obligaría a mantener una lista de etiquetas permitidas para wp_kses()
   solo para este único ícono. */
.bantrab-form-block__choice input[type="checkbox"]:checked::after,
.bantrab-form-block__consent-input:checked::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 5px;
	width: 6px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg );
}

/* El punto central de una opción redonda, en vez de la palomita. */
.bantrab-form-block__choice input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	top: 4px;
	left: 4px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
}

/* ---------- Consentimiento (paridad con bantrab/product-form, render.php:370-381) ---------- */

/* Traducción literal de las clases que product-form usa para su casilla de
   política de privacidad. A diferencia de `__choice` (radio/checkbox de
   varias opciones, sin referencia visual propia), esta sí tiene una
   referencia exacta que replicar valor por valor, así que usa sus propias
   clases en vez de reusar `__choice`. */
.bantrab-form-block__consent {
	display: flex;
	align-items: center;
	gap: 12px;
}

.bantrab-form-block__consent-label {
	color: var( --bantrab-form-text );
	font-size: 16px;
	line-height: 140%;
	cursor: pointer;
}

.bantrab-form-block__consent-link {
	color: var( --bantrab-form-focus );
	font-weight: 700;
	text-decoration: none;
}

.bantrab-form-block__consent-link:hover {
	text-decoration: underline;
}

/* ---------- Adjunto (file): paridad con bantrab/product-form (AD-6) ---------- */

/* Valores literales de `product-form/render.php:333-348`
   (`bg-[#F3F4F6] rounded-[12px] p-6 xl:p-8 border-2 border-dashed
   border-[#D1D5DB] hover:border-[#00A99D]`), traducidos por valor y no por
   clase — igual criterio que el resto del archivo (ver el encabezado). La
   zona ENTERA es el `<label>` (marcado de la rebanada 1): el `cursor:
   pointer` va acá, no en el input, porque clickear cualquier punto de la
   zona ya abre el selector nativo sin una sola línea de JavaScript. */
.bantrab-form-block__upload {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 24px;
	border: 2px dashed var( --bantrab-form-border );
	border-radius: 12px;
	background: #f3f4f6;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

@media ( min-width: 768px ) {
	.bantrab-form-block__upload {
		flex-direction: row;
	}
}

@media ( min-width: 1280px ) {
	.bantrab-form-block__upload {
		padding: 32px;
	}
}

.bantrab-form-block__upload:hover {
	border-color: var( --bantrab-form-focus );
}

/* `:focus-within` porque el anillo tiene que pintarse en la ZONA, no en el
   input recortado a 1px (más abajo): `:focus-visible` solo se aplica al
   elemento que efectivamente recibe el foco, nunca a un ancestro. A
   diferencia del botón (`:795`), acá no hace falta el `@supports not
   selector(:focus-visible)` de respaldo: ese respaldo existe para navegadores
   que no entienden `:focus-visible`, y `:focus-within` es un selector
   distinto con soporte ya universal, sin nada que respaldar. */
.bantrab-form-block__upload:focus-within {
	outline: 2px solid var( --bantrab-form-focus );
	outline-offset: 2px;
}

.bantrab-form-block__upload-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
}

.bantrab-form-block__upload-copy {
	display: flex;
	flex-direction: column;
	width: fit-content;
	max-width: 100%;
	text-align: left;
}

@media ( min-width: 768px ) {
	.bantrab-form-block__upload-copy {
		flex: 1 1 0%;
		width: auto;
	}
}

/* `<span>`, no `<h3>` (evaluado y corregido en esta rebanada): un `<label>`
   solo admite contenido de fraseo, y un encabezado no lo es — meterlo ahí es
   marcado inválido, y además lo apunta el lector de pantalla como un título
   navegable de la página cuando en realidad es la etiqueta de un campo. La
   referencia también usa `<h3>`, pero ahí SÍ es válido: no vive dentro de
   ningún `<label>` (`product-form/render.php:332`), porque esa zona no es
   nativamente accesible y no necesita serlo. El texto y el tamaño se
   conservan sin cambio; solo la etiqueta. */
.bantrab-form-block__upload-heading {
	display: block;
	margin: 0 0 8px;
	color: var( --bantrab-form-text );
	font-size: 15px;
	font-weight: 600;
}

/* Mismo razonamiento que el encabezado: `<span>` en vez de `<p>`, que
   tampoco es contenido de fraseo. */
.bantrab-form-block__upload-description {
	display: block;
	margin: 0;
	color: var( --bantrab-form-muted );
	font-size: 16px;
}

/* Un solo nodo para dos estados, nunca los dos textos a la vez (lo decide
   `frontend.js`): el nombre del archivo elegido (sin modificador, mismo
   teal que el resto del foco) o un aviso — tamaño supera el tope, formato no
   permitido, o el recordatorio de volver a elegir tras un repintado clásico
   (AD-6, finding: repaint notice). Reusar el mismo nodo en vez de crear uno
   nuevo es el mismo criterio de regiones vivas que ya sigue `frontend.js`
   (AD-8): la región existe desde el primer render, JS solo la llena. */
.bantrab-form-block__upload-filename {
	display: block;
	margin: 12px 0 0;
	color: var( --bantrab-form-focus );
	font-size: 12px;
	font-weight: 600;
}

@media ( min-width: 1280px ) {
	.bantrab-form-block__upload-filename {
		font-size: 14px;
	}
}

.bantrab-form-block__upload-filename:empty {
	display: none;
}

.bantrab-form-block__upload-filename--notice {
	color: var( --bantrab-form-danger );
}

/* El input real: recortado a 1px, NUNCA oculto (AD-6). `display: none` y
   `visibility: hidden` lo sacarían del orden de tabulación y del árbol de
   accesibilidad, que es justo lo que rompe la referencia con su
   `class="hidden"` (`product-form/render.php:347`). Mismo patrón de recorte
   que `.bantrab-form-block__sr-live`, con `position: absolute`
   dentro de la zona en `position: relative` (arriba): así el navegador
   desplaza el foco al lugar correcto en vez de a un origen de documento
   fuera de vista. */
.bantrab-form-block__upload-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* ---------- Separador de sección ---------- */

.bantrab-form-block__section {
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid var( --bantrab-form-border );
}

.bantrab-form-block__section-title {
	margin: 0;
	color: var( --bantrab-form-text );
	font-size: 1.1em;
}

.bantrab-form-block__section-help {
	margin: 4px 0 0;
	color: var( --bantrab-form-muted );
}

/* ---------- Ayuda, error, banners ---------- */

.bantrab-form-block__help {
	margin-top: 4px;
	color: var( --bantrab-form-muted );
	font-size: 13px;
}

.bantrab-form-block__error {
	margin-top: 4px;
	color: var( --bantrab-form-danger );
	font-size: 13px;
}

.bantrab-form-block__errors {
	margin-bottom: 16px;
	padding: 12px 16px;
	border-left: 4px solid var( --bantrab-form-danger );
	background: #fff;
	color: var( --bantrab-form-text );
	border-radius: 4px;
}

.bantrab-form-block__errors-title {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 600;
	color: var( --bantrab-form-text );
}

.bantrab-form-block__errors-list {
	margin: 0;
	padding-left: 20px;
}

.bantrab-form-block__errors-list a {
	color: var( --bantrab-form-danger );
	text-decoration: underline;
}

/* Aviso de envío correcto, según la referencia de diseño del 14/09/2026
   (`job-summary/bantrab-forms/image.png`): caja verde clara con la tilde a la
   izquierda y el texto al lado.

   `align-items: center` reproduce la referencia, donde el mensaje ocupa tres
   renglones y la tilde está a la altura del del medio. La alternativa —anclarla
   a la primera línea, que es la convención habitual para icono+texto— se probó
   y se descartó con el cliente el 14/09/2026: con cuatro renglones la tilde
   quedaba 34px por encima del centro de la caja. Los mensajes de éxito son
   cortos, así que el riesgo de que quede flotando lejos de toda palabra es
   teórico.

   El `flex-shrink: 0` evita que un mensaje largo le robe sus 12px de ancho.

   Colores según la Rev 2 (lámina 22): cyan con texto blanco, a pedido del
   cliente. La tilde toma el blanco por `currentColor`. Blanco sobre #00b4ae
   queda en un contraste de 2,6:1, por debajo del 4,5:1 de WCAG AA para este
   tamaño; quedó registrado como observación. */
.bantrab-form-block__success {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
	padding: 24px;
	border-radius: 12px;
	background: #00b4ae;
	color: #fff;
}

.bantrab-form-block__success-icon {
	flex-shrink: 0;
}

.bantrab-form-block__success-text {
	margin: 0;
	color: inherit;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: 140%;
}

/* Ocupa el lugar del formulario cuando la captación está cerrada por
   programación o por tope. Conserva el fondo blanco que el aviso de éxito tenía
   antes de la referencia de diseño: son cosas distintas —una celebra un envío y
   la otra explica que no se puede enviar— y compartir color las confundiría. */
.bantrab-form-block__closed {
	padding: 24px;
	border-radius: 12px;
	background: #fff;
	color: var( --bantrab-form-text );
	font-weight: 600;
}

.bantrab-form-block__notice {
	padding: 12px 16px;
	border-left: 4px solid var( --bantrab-form-muted );
	background: rgba( 255, 255, 255, 0.6 );
	color: var( --bantrab-form-text );
}

/* ---------- Verificación anti-spam ---------- */

/* El contenedor reserva el lugar aunque todavía no haya proveedor montado, para
   que la maqueta no cambie de alto el día que se conecte (slice 2). */
.bantrab-form-block__captcha {
	min-height: 78px;
}

/* El widget de Google se pinta dentro de este div (Bantrab_Form_Captcha::render_widget()). */
.bantrab-form-block__recaptcha {
	min-height: 78px;
}

/* ---------- Honeypot ---------- */

/* No debe verse ni ocupar espacio, pero sí existir en el DOM. */
.bantrab-form-block__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Región en vivo del cambio de paso: la escucha el lector de pantalla y no se
   ve. `display: none` o `visibility: hidden` la sacarían también del árbol de
   accesibilidad y no anunciaría nada, así que se recorta a un píxel — el patrón
   habitual para texto que solo existe para quien navega sin ver la pantalla. */
.bantrab-form-block__sr-live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/* ---------- Envío ---------- */

/* Paridad literal con `bantrab/product-form` (`themes/bantrab/blocks/product-form/render.php:402-412`):
   ese bloque escanea `themes/bantrab/tailwind.config.js`, así que sus clases se generan; este mu-plugin
   nunca se escanea (ver la nota del encabezado del archivo), así que cada valor va literal acá.

   El "pt-4 flex justify-center max-w-max mx-auto" del wrapper de referencia no necesita un `<div>`
   propio: `.bantrab-form-block__form` ya es `flex-direction: column` con `gap: 16px` entre hermanos
   (equivalente al `pt-4`), y `align-self: center` reduce este botón a su ancho de contenido y lo
   centra (equivalente a `justify-center max-w-max mx-auto`).

   Y por eso el botón NO lleva `width: 100%`, aunque la referencia sí tenga `w-full`. Allá ese 100%
   se mide contra un contenedor con `max-width: max-content`, así que las dos clases se cancelan y el
   botón termina midiendo su contenido. Traducirlo al pie de la letra, sin el contenedor que lo
   acotaba, lo estiraba a todo el ancho de la tarjeta en móvil — que es justo lo que la referencia
   no hace. */
/* Alto fijo de 64px y tipografía de 24px/700 con interlineado de 68px, pedidos
   por diseño el 14/09/2026 para los tres botones de la maqueta —enviar, volver
   y continuar—.

   Ojo con esa combinación, que parece un descuido y no lo es: el interlineado
   (68px) es MAYOR que el alto de la caja (64px). No desborda nada visible
   porque el botón centra su contenido con flex y las letras de 24px viven
   holgadas dentro de ese renglón; el `overflow: hidden` está igual para que ni
   siquiera un tipo de letra con acentos altos pueda asomarse fuera del borde
   redondeado. El `box-sizing` va explícito porque con relleno y alto fijo a la
   vez, el modelo de caja decide si el botón mide 64 o 64 más el relleno. */
.bantrab-form-block__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	box-sizing: border-box;
	gap: 12px;
	height: 64px;
	padding: 0 18px;
	overflow: hidden;
	border: 0;
	border-radius: 9999px;
	background: var( --bantrab-form-focus );
	color: #fff;
	font: inherit;
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 10px 15px -3px rgba( 0, 0, 0, 0.1 ), 0 4px 6px -4px rgba( 0, 0, 0, 0.1 );
	transition: all 0.15s ease;
}

.bantrab-form-block__submit:hover {
	background: var( --bantrab-form-focus-hover );
	box-shadow: 0 20px 25px -5px rgba( 0, 0, 0, 0.1 ), 0 8px 10px -6px rgba( 0, 0, 0, 0.1 );
}

/* Gris apagado mientras falte algún campo obligatorio, con sus valores propios
   y ya no una opacidad sobre el teal: bajarle la opacidad al botón encendido lo
   dejaba en un verde lavado que seguía leyéndose como «apretame». Se va también
   la sombra, que es lo que lo hacía parecer levantado de la tarjeta. */
.bantrab-form-block__submit:disabled {
	background: #a1abb2;
	color: #d9dde0;
	box-shadow: none;
	cursor: not-allowed;
}

/* La flecha trae `fill="white"` como atributo de presentación en su propio
   `<path>`. No hace falta tocar el marcado para apagarla: cualquier regla de
   CSS le gana a un atributo de presentación, que pesa menos que el selector más
   débil. */
.bantrab-form-block__submit:disabled .bantrab-form-block__submit-icon path {
	fill: #d9dde0;
}

/* Un botón apagado no reacciona al mouse: sin esta regla heredaría el `:hover`
   de más arriba y se pintaría del teal encendido, prometiendo que se puede
   apretar. Antes repetía los valores del estado normal porque el deshabilitado
   solo bajaba la opacidad; ahora que tiene color propio, sostiene ese. */
.bantrab-form-block__submit:disabled:hover {
	background: #a1abb2;
	box-shadow: none;
}

.bantrab-form-block__submit-label {
	display: flex;
	align-items: center;
	line-height: 68px;
}

/* `w-[32px] min-w-[32px] md:w-[40px] md:min-w-[40px]` de la referencia: solo
   fija el ancho, nunca el alto — se traduce literal, sin agregar un `height`
   que la referencia tampoco declara. */
.bantrab-form-block__submit-icon {
	width: 32px;
	min-width: 32px;
}

/* En móvil el botón de envío se estira a lo ancho, con tope de 380px y
   centrado: en una pantalla angosta, un botón que mide su contenido queda como
   una isla y cuesta acertarle con el pulgar. Debajo de 380px de caja útil el
   tope no llega a morder y el botón ocupa todo el ancho disponible —a 375px,
   por ejemplo—; por encima se queda en 380 y se centra.

   El selector de hijo directo es lo que deja AFUERA al formulario por pasos, y
   no es un capricho de escritura: ahí el botón comparte fila con «Volver», así
   que estirarlo echaría al otro a un segundo renglón en todas las pantallas
   angostas. El botón suelto cuelga del `<form>`; el de pasos, de la fila de
   navegación. */
@media ( max-width: 767px ) {
	.bantrab-form-block__form > .bantrab-form-block__submit {
		width: 100%;
		max-width: 380px;
	}
}

/* Desde tablet solo se ensancha el respiro lateral y crece el icono. El alto, el
   cuerpo y el interlineado ya no cambian por ancho: diseño los pidió iguales en
   toda la escala. */
@media ( min-width: 768px ) {
	.bantrab-form-block__submit {
		padding: 0 24px;
	}

	.bantrab-form-block__submit-icon {
		width: 40px;
		min-width: 40px;
	}
}

/* La referencia suelta acá su `w-full` (`xl:w-auto`). Este botón nunca lo tuvo,
   así que no hay nada que soltar: mide su contenido en todos los anchos. */

/* ---------- Foco: el recorrido por teclado ---------- */

/* Los campos NO llevan anillo de foco: su indicador es el borde, que pasa de
   transparente a `#00a99d` con 2px en todo el perímetro (ver la regla `:focus`
   más arriba). Es lo mismo que hace el bloque de referencia, que resuelve el
   foco con `focus:border-[#00A99D] focus:outline-none focus:ring-0`
   (`product-form/render.php:301`), y alcanza para WCAG 2.4.7: el cambio de
   color del borde es un indicador visible.

   Sumarle además un anillo exterior era duplicar la señal y romper la paridad.

   El botón es el caso distinto y por eso conserva el suyo: no tiene borde
   —`border: 0`— y al enfocarse no cambia nada, así que sin anillo alguien que
   navegue con teclado no tendría forma de saber dónde está parado. El bloque de
   referencia tampoco se lo quita: su clase no lleva `focus:outline-none`, así
   que hereda el anillo del navegador. Acá se dibuja explícito para que sea el
   mismo en todos.

   `:focus-visible` y no `:focus`: aparece al navegar con teclado, no en cada
   clic con el ratón, que es cuando estorba. */
.bantrab-form-block button:focus-visible {
	outline: 2px solid var( --bantrab-form-focus );
	outline-offset: 2px;
}

/* Los navegadores que no entienden `:focus-visible` lo reciben en cada foco:
   preferible que sobre a que falte. */
@supports not selector( :focus-visible ) {
	.bantrab-form-block button:focus {
		outline: 2px solid var( --bantrab-form-focus );
		outline-offset: 2px;
	}
}

/* ---------- Deshabilitado ---------- */

.bantrab-form-block input:disabled,
.bantrab-form-block select:disabled,
.bantrab-form-block textarea:disabled {
	background: #f0f0f1;
	color: var( --bantrab-form-muted );
	cursor: not-allowed;
}

.bantrab-form-block__choice input:disabled ~ * {
	color: var( --bantrab-form-muted );
}

/* ---------- Pasos (form-multi-step-navigation) ---------- */

/* Sin referencia de Figma todavía (design.md R6): construidos dentro del
   mismo lenguaje visual que el resto de la tarjeta — teal de foco, tipografía
   ya en uso — a la espera del visto bueno de diseño. */

.bantrab-form-block__steps-meta {
	margin-bottom: 16px;
}

/* Un segmento por paso, separados por 8px. El hueco lo pone `gap` y no un
   margen por segmento: con `gap` no hay que descontarle el hueco sobrante al
   último, y los segmentos se reparten el ancho solos con `flex: 1`. */
.bantrab-form-block__steps-progress {
	display: flex;
	gap: 8px;
}

/* El gris de los pasos que faltan es un color opaco y no una transparencia del
   texto: sobre el amarillo de la tarjeta, un negro al 12% se volvía un ocre
   sucio en vez del gris que pide el diseño. */
.bantrab-form-block__steps-progress-step {
	flex: 1;
	height: 8px;
	border-radius: 9999px;
	background: #81898e;
	transition: background-color 0.2s ease;
}

.bantrab-form-block__steps-progress-step.is-done {
	background: var( --bantrab-form-focus );
}

.bantrab-form-block__steps-counter {
	margin: 8px 0 0;
	color: var( --bantrab-form-text-soft );
	font-size: 13px;
	font-weight: 600;
}

/* Desde tablet el contador se sienta al lado de la barra, a 24px. El
   `white-space: nowrap` no es decorativo: el contador es la única pieza de
   ancho fijo de la fila y, sin él, «Paso 1/3» se parte en dos renglones en
   cuanto la barra le reclama espacio. `flex: 1` sobre la barra y `flex-shrink:
   0` sobre el contador reparten el sobrante en la dirección correcta: el texto
   pide lo que necesita y la barra se queda con el resto. */
@media ( min-width: 768px ) {
	.bantrab-form-block__steps-meta {
		display: flex;
		align-items: center;
		gap: 24px;
	}

	.bantrab-form-block__steps-progress {
		flex: 1;
	}

	.bantrab-form-block__steps-counter {
		flex-shrink: 0;
		margin-top: 0;
		white-space: nowrap;
	}
}

/* Texto que solo existe para quien navega sin ver la pantalla. Mismo recorte que
   `.bantrab-form-block__sr-live` y que el encabezado de paso sin etiqueta:
   `display: none` lo sacaría también del árbol de accesibilidad, que es
   justamente lo contrario de lo que se busca. */
.bantrab-form-block__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

.bantrab-form-block__step-heading {
	margin: 0 0 4px;
	color: var( --bantrab-form-text );
	font-size: 1.15em;
}

/* El foco que recibe al cambiar de paso (FMS-9) no debe ganar un anillo
   permanente que no tendría sentido en un título, ni perderlo del todo para
   quien navega con teclado — mismo criterio `:focus-visible` que el resto
   del formulario. */
.bantrab-form-block__step-heading:focus-visible {
	outline: 2px solid var( --bantrab-form-focus );
	outline-offset: 2px;
}

/* Separador que no pide mostrar su etiqueta: el encabezado sigue existiendo
   —es el destino del foco al cambiar de paso y la fuente del texto que se
   anuncia— pero no ocupa lugar. Se recorta a un píxel, igual que
   `.bantrab-form-block__sr-live` y que el input real de la zona de
   archivo (`.bantrab-form-block__upload-input`): `display: none` o
   `visibility: hidden` lo sacarían del
   árbol de accesibilidad y del orden de foco, que es justo lo que acá no
   puede pasar. */
.bantrab-form-block__step-heading--hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

.bantrab-form-block__step-help {
	margin: 0 0 16px;
	color: var( --bantrab-form-muted );
}

/* `flex-wrap` y `flex-shrink: 0` van juntos y ninguno de los dos sobra. El texto
   del botón de envío lo escribe quien configura el formulario, así que puede ser
   «Enviar» o «Enviar mi solicitud»; con los botones a 24px y una pantalla de
   390px, el par deja de entrar en una línea. Sin `flex-shrink: 0` el navegador
   los encoge por debajo de su contenido —medido: «Volver» bajaba de 108px a
   79px cuando su texto necesita 108— y como el botón recorta lo que se le
   escapa, la palabra se cortaba a la mitad en silencio. Prefiere bajar a dos
   renglones antes que mutilar una etiqueta. */
.bantrab-form-block__step-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 24px;
	margin-top: 24px;
}

.bantrab-form-block__step-nav > button {
	flex-shrink: 0;
}

/* En móvil se apilan, y el que avanza va ARRIBA: es la acción que la persona
   viene a hacer, y dejarla debajo obliga a saltear la salida para llegar a
   ella. En el marcado «Anterior» va primero —es el orden de lectura y el de
   tabulación, que conviene no alterar—, así que el orden visual se invierte con
   `column-reverse` en vez de reordenar el HTML: cambiar el DOM movería también
   el recorrido por teclado. */
@media ( max-width: 767px ) {
	.bantrab-form-block__step-nav {
		flex-direction: column-reverse;
	}

	/* Mismo trato que el botón del formulario de una sola página: a lo ancho,
	   con tope de 380px. Apilados y midiendo su contenido quedaban dos islas de
	   anchos distintos —«Anterior» es más corto que «Continuar»— y esa
	   diferencia se lee como jerarquía donde no la hay. */
	.bantrab-form-block__step-nav > button {
		width: 100%;
		max-width: 380px;
	}
}

/* Entre 768px y 1279px TODO el bloque se acota al mismo ancho útil y se centra:
   título, bajada, barra de progreso, contador, encabezado y ayuda del
   separador, la navegación de pasos y el aviso de envío correcto. La rejilla de
   campos ya lo hacía por su cuenta (`.bantrab-form-block__grid`); esto alinea
   el resto con ella.

   Es el tramo en el que la tarjeta ya es ancha pero la columna de texto todavía
   no se puso al lado —eso pasa recién en 1280—, así que sin tope cada cosa se
   estira por su cuenta. Medido a 1024px antes de esto: título 720px, campos
   674px, barra de progreso 849px. Tres ejes distintos en un mismo bloque.

   El ancho elegido es el de los CAMPOS y no el del título. Se probaron los dos
   con el cliente el 14/09/2026: con 720px el andamiaje quedaba 23px por lado
   más ancho que los campos, así que se bajó todo —título y bajada incluidos— a
   `--bantrab-form-inner`. Los 720px del título siguen en su regla base porque
   son el valor de paridad con `product-form`, y desde 1280 vuelven a mandar.

   Desde 1280 no hace falta soltar nada con una regla aparte: la consulta está
   acotada por arriba, y ahí la columna del formulario ya es el 60% de la
   tarjeta y es ella la que pone el límite. Mismo criterio que el bloque que suelta la rejilla en 1280. */
@media ( min-width: 768px ) and ( max-width: 1279px ) {
	/* `width: 100%` no sobra: `__steps-meta` es hijo flex de
	   `.bantrab-form-block__form`, que es `flex-direction: column`, y poner
	   márgenes automáticos en el eje cruzado desactiva el `align-items: stretch`
	   que traía por omisión. Sin recuperar el ancho a mano, el elemento se
	   dimensiona por su contenido y el tope no llega a aplicarse nunca. Es el
	   mismo tropiezo ya documentado en `.bantrab-form-block__grid`. El resto no lo
	   necesita: son bloques comunes, no hijos de un contenedor flex. */
	.bantrab-form-block__steps-meta {
		width: 100%;
		max-width: var( --bantrab-form-inner );
		margin-left: auto;
		margin-right: auto;
	}

	/* El `:not()` es deliberado: un encabezado sin etiqueta que mostrar está
	   recortado a un píxel y posicionado en absoluto (`.bantrab-form-block__step-heading--hidden`), y darle tope y
	   márgenes automáticos le pisaría el `margin: -1px` del recorte. */
	.bantrab-form-block__heading,
	.bantrab-form-block__subheading,
	.bantrab-form-block__step-heading:not( .bantrab-form-block__step-heading--hidden ),
	.bantrab-form-block__step-help,
	.bantrab-form-block__step-nav,
	.bantrab-form-block__success {
		max-width: var( --bantrab-form-inner );
		margin-left: auto;
		margin-right: auto;
	}
}

/* «Anterior» toma del botón de envío la caja entera —alto, relleno, radio,
   tipografía— porque comparte su clase en el marcado. Lo único que redefine es
   el color: blanco con el texto en teal, para leerse como la salida secundaria
   del paso sin dejar de ser un botón del mismo tamaño que el otro.

   Hasta el 14/09/2026 se veía como un enlace y se llamaba «Atrás». Diseño pidió
   primero unificar los tres botones y después distinguir este por color; las
   dos vueltas quedan registradas para que ninguna parezca un descuido.

   El `:hover` se redefine aparte porque el del botón de envío lo pintaría del
   teal encendido, que es justo lo que este NO es. */
.bantrab-form-block__step-back {
	background: #fff;
	color: #00b4ae;
}

.bantrab-form-block__step-back:hover {
	background: #fff;
}

/* «Continuar» comparte medida y tipografía con los otros dos, pero no el
   marcado: no tiene icono, así que no necesita el `<span>` interno ni el `gap`.
   El interlineado va acá directo, sobre el texto del botón. */
.bantrab-form-block__step-continue {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 64px;
	padding: 0 32px;
	overflow: hidden;
	border: 0;
	border-radius: 9999px;
	background: var( --bantrab-form-focus );
	color: #fff;
	font: inherit;
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: 68px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.bantrab-form-block__step-continue:hover {
	background: var( --bantrab-form-focus-hover );
}

/* Dentro de la fila de pasos, el botón de envío suelta el `align-self: center`
   de su regla base. Ese valor existe para cuando el botón vive solo en la
   columna del formulario y tiene que encogerse a su contenido; acá el centrado
   lo resuelve la fila con `justify-content`, y dejarlo puesto interfiere cuando
   la fila se apila en móvil.

   Hasta el 14/09/2026 esta regla en cambio lo empujaba a la derecha con un
   `margin-left: auto`, con «Anterior» pegado a la izquierda. Diseño pidió
   centrarlos, así que ese empuje —y el simétrico del otro botón— se retiran. */
.bantrab-form-block__step-nav .bantrab-form-block__submit {
	align-self: auto;
}