/* =============================================================================
 * IFHA Pagos — sistema visual del centro de pagos
 * -----------------------------------------------------------------------------
 * POR QUE EXISTE: el prototipo aprobado (design_handoff_centro_pagos_ifha/
 * "Centro de pagos IFHA.dc.html") no usa una sola clase: cada elemento lleva sus
 * estilos en linea. Ese archivo es la verdad visual, pero no se puede publicar
 * asi en WordPress, donde el marcado lo arma PHP y el CSS tiene que convivir con
 * Astra Pro, Elementor y UAE. Este archivo traduce ese prototipo, valor por
 * valor, a un sistema de clases con prefijo `.ifha-p-`. Si el prototipo dice
 * `padding:18px 20px`, aca dice `18px 20px`: no se redondea a rem ni se
 * "mejora" ninguna medida. La lista completa de clases, con el marcado esperado
 * de cada una, esta en docs/CONTRATO-diseno.md — los demas agentes escriben el
 * HTML leyendo ese documento, no este archivo.
 *
 * CUATRO DECISIONES QUE NO HAY QUE DESHACER:
 *
 * 1. Los tokens se declaran en `.ifha-p`, no en `:root`. Todo el marcado del
 *    plugin cuelga de un contenedor `.ifha-p`, asi que las variables llegan a
 *    donde hacen falta sin ensuciar el ambito global del sitio (que ya define
 *    --blue-600, --line-300, etc. desde el sistema de diseño) ni exponerse a
 *    que UCSS se lleve puesto un bloque `:root` suelto. Los valores salen de
 *    _ds/.../tokens/*.css, copiados a mano con prefijo --ifha-.
 *
 * 2. Cada regla arranca con `.ifha-p` (o con `body.ifha-pagos`). Astra estila
 *    `button:hover` con especificidad (0,1,1) y le gana a una clase sola: el
 *    texto del boton desaparece al pasar el mouse. Con `.ifha-p .ifha-p-btn`
 *    quedamos en (0,2,1) y no hace falta un solo `!important` para los
 *    componentes. Los `!important` que hay abajo son unicamente para tapar
 *    estilos en linea de terceros (el boton flotante de WhatsApp, el footer) o
 *    del propio parcial de correo, que viaja con estilos en linea.
 *
 * 3. Los estados se leen del atributo ARIA cuando existe
 *    (`[aria-checked="true"]`, `[aria-current="step"]`, `[aria-invalid="true"]`)
 *    y ademas de una clase `.is-*`. Asi el marcado accesible y el marcado
 *    server-side pintan igual sin que nadie tenga que acordarse de poner las
 *    dos cosas. Las reglas con `:has()` van SIEMPRE en un bloque aparte: un
 *    selector que el navegador no entiende invalida toda la lista de selectores
 *    donde aparece, y se llevaria puesto el estado seleccionado en navegadores
 *    viejos.
 *
 * 4. Un solo punto de quiebre propio del prototipo: 900 px, donde aparece el
 *    panel lateral "Tu pago" y desaparece la fila de total de celular. Los
 *    otros tres (480 / 600 / 900) existen para el marcado de tablas que se
 *    comparte con los correos, que no puede usar flexbox.
 *
 * Mobile-first, ancho maximo 960 px, objetivos tactiles >= 44 px, foco visible
 * de 2 px con offset 2 px, transiciones de 120-180 ms e importes con
 * tabular-nums. Probado a 390 / 768 / 900 / 1280 / 1366 / 1440 px.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. Tokens portados del sistema de diseño
 * -------------------------------------------------------------------------- */

.ifha-p {
	/* Azules institucionales */
	--ifha-blue-900: #14345F;
	--ifha-blue-800: #1B4682;
	--ifha-blue-600: #245CA9;
	--ifha-blue-100: #CFDDF2;
	--ifha-blue-50: #F0F5FC;

	/* Verdes (acento y CTA) */
	--ifha-green-900: #2A3D14;
	--ifha-green-800: #476E23;
	--ifha-green-700: #5B8C2D;
	--ifha-green-600: #6EA837;
	--ifha-green-500: #92D050;
	--ifha-green-50: #EBF5DD;

	/* Neutros */
	--ifha-ink: #2A2E34;
	--ifha-gray-600: #5A6470;
	--ifha-gray-400: #9AA7B2;
	--ifha-line-300: #D4D9DE;
	--ifha-line-200: #E2E7EC;
	--ifha-surface-100: #F1F4F7;
	--ifha-surface-50: #F5F9FF;
	--ifha-white: #FFFFFF;

	/* Semanticos */
	--ifha-red-500: #D64C4C;
	--ifha-amber-500: #E09B2B;
	--ifha-teal-500: #1FBDA0;

	/* Tipografia: Roboto ya la carga el sitio; el stack de respaldo es el del
	   sistema operativo para que nada dependa de una webfont que puede fallar.
	   Este archivo NO carga webfonts. */
	--ifha-font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--ifha-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Espaciado */
	--ifha-space-1: 4px;
	--ifha-space-2: 8px;
	--ifha-space-3: 12px;
	--ifha-space-4: 16px;
	--ifha-space-5: 24px;
	--ifha-space-6: 32px;
	--ifha-space-7: 48px;

	/* Radios */
	--ifha-radius-sm: 8px;
	--ifha-radius-md: 14px;
	--ifha-radius-pill: 999px;

	/* Movimiento: colores y estados en 120 ms, bloques revelados en 180 ms.
	   Sin rebotes (el material de origen no tiene animacion). */
	--ifha-dur-fast: 120ms;
	--ifha-dur-base: 180ms;
	--ifha-ease-out: cubic-bezier(.2, .8, .3, 1);
	--ifha-transition: color var(--ifha-dur-fast) var(--ifha-ease-out), background-color var(--ifha-dur-fast) var(--ifha-ease-out), border-color var(--ifha-dur-fast) var(--ifha-ease-out);

	/* Medidas */
	--ifha-max: 960px;
	--ifha-aside: 300px;
	--ifha-hit: 44px;
	--ifha-focus: #6EA837;
}

/* -----------------------------------------------------------------------------
 * 2. Contenedor raiz
 * -------------------------------------------------------------------------- */

.ifha-p {
	box-sizing: border-box;
	max-width: var(--ifha-max);
	margin: 0 auto;
	padding: var(--ifha-space-5) var(--ifha-space-4) var(--ifha-space-7);
	font-family: var(--ifha-font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ifha-ink);
	-webkit-font-smoothing: antialiased;
}

.ifha-p *,
.ifha-p *::before,
.ifha-p *::after {
	box-sizing: border-box;
}

/* Astra reserva `display` en algunos elementos: el atributo `hidden` tiene que
   ganar siempre, porque es con lo que el JS del paso 1 muestra y esconde los
   bloques condicionales (edicion, otros pagos, alumno, factura). */
.ifha-p [hidden] {
	display: none !important;
}

/* -----------------------------------------------------------------------------
 * 3. Neutralizacion de Astra dentro del contenedor
 *
 * Astra pinta `button`, `input`, `select` y sobre todo `button:hover` con color
 * de fondo y de texto propios: sin esto, el texto del boton desaparece al pasar
 * el mouse. Se apaga todo aca y cada componente vuelve a pintar lo suyo con mas
 * especificidad (`.ifha-p .ifha-p-btn--primary:hover` = (0,3,1) le gana a
 * `.ifha-p button:hover` = (0,2,1)).
 * -------------------------------------------------------------------------- */

.ifha-p button,
.ifha-p input,
.ifha-p select,
.ifha-p textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
	max-width: 100%;
}

.ifha-p button {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	text-shadow: none;
	text-decoration: none;
	-webkit-appearance: none;
	appearance: none;
}

.ifha-p button:hover,
.ifha-p button:focus,
.ifha-p button:active {
	background: none;
	color: inherit;
	box-shadow: none;
	text-decoration: none;
}

/* El select tiene que conservar la flecha nativa: Astra le pone
   `appearance:none` y dibuja la suya con una imagen de fondo que aca se apaga.
   Sin `appearance:auto` el campo queda sin ninguna flecha. */
.ifha-p select {
	-webkit-appearance: auto;
	appearance: auto;
	background-image: none;
	box-shadow: none;
}

.ifha-p input[type="checkbox"],
.ifha-p input[type="radio"] {
	-webkit-appearance: auto;
	appearance: auto;
	box-shadow: none;
}

.ifha-p ::-webkit-input-placeholder {
	color: var(--ifha-gray-400);
}

.ifha-p ::placeholder {
	color: var(--ifha-gray-400);
	opacity: 1;
}

/* Reset de tablas: Astra le dibuja borde a `table`, `th` y `td`, y las tablas
   de este plugin son de maquetado (tienen que verse igual en un correo, donde
   no hay hoja de estilos). Se apaga aca y cada componente pinta su propia
   linea despues, con mas especificidad. */
.ifha-p table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: none;
}

.ifha-p th,
.ifha-p td {
	border: 0;
	background: none;
}

.ifha-p a {
	color: var(--ifha-blue-600);
	text-decoration: none;
}

.ifha-p a:hover,
.ifha-p a:focus {
	color: var(--ifha-blue-800);
	text-decoration: underline;
}

/* Foco visible unico para todo lo interactivo (README seccion 5). No se le toca
   el radio: el contorno sigue la forma real del elemento (pildora o rectangulo). */
.ifha-p a:focus-visible,
.ifha-p button:focus-visible,
.ifha-p input:focus-visible,
.ifha-p select:focus-visible,
.ifha-p textarea:focus-visible,
.ifha-p [tabindex]:focus-visible {
	outline: 2px solid var(--ifha-focus);
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
 * 4. Estructura de pagina
 *
 * `.ifha-p-flow` es la columna unica (pantallas de instrucciones y resultado).
 * `.ifha-p-layout` es la fila de dos columnas de los pasos 1 y 2: contenido a la
 * izquierda y panel "Tu pago" pegajoso a la derecha desde 900 px.
 *
 * OJO: `gap:20px` es el valor del prototipo y el CSS critico en linea
 * (class-templates.php::css_critico) declara EXACTAMENTE el mismo. Esta regla es
 * (0,2,0) y la del critico (0,1,0), asi que esta gana igual; pero mientras la
 * hoja viaja asincrona (UCSS) el primer pintado usa el critico, y si los dos
 * numeros no coinciden la pantalla salta. Si cambia uno, cambian los dos.
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-flow,
.ifha-p .ifha-p-col {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ifha-p .ifha-p-layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--ifha-space-5);
}

.ifha-p .ifha-p-col {
	flex: 1 1 380px;
	min-width: 0;
}

/* -----------------------------------------------------------------------------
 * 5. Tipografia
 * -------------------------------------------------------------------------- */

/* El `!important` del tamaño es obligatorio y es el unico de esta seccion: el
   parcial templates/emails/partials/instrucciones.php se comparte con el correo
   y lleva `font-size:26px` en linea (un correo mide 600 px de ancho). En la web
   el titulo va a 30 px como en el prototipo, y un estilo en linea solo se tapa
   con !important. */
.ifha-p .ifha-p-h1 {
	margin: 0 0 6px;
	font-family: var(--ifha-font);
	font-size: 30px !important;
	line-height: 1.15;
	font-weight: 900;
	letter-spacing: -.01em;
	color: var(--ifha-ink);
	text-wrap: pretty;
}

.ifha-p .ifha-p-h2 {
	margin: 0;
	font-family: var(--ifha-font);
	font-size: 17px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--ifha-ink);
}

.ifha-p .ifha-p-lead {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ifha-gray-600);
}

/* Kicker chico: etiquetas de campo y rotulos de tarjeta. 12 px, 700,
   mayusculas, tracking .08em (token del sistema). */
.ifha-p .ifha-p-kicker,
.ifha-p .ifha-p-label {
	display: block;
	margin: 0;
	font-family: var(--ifha-font);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ifha-gray-600);
}

/* Kicker grande: titulo de seccion suelta ("Programa o concepto", "Medio de
   pago", "Proximos pasos", "Tu pago"). Mismo peso y tracking, 14 px. */
.ifha-p .ifha-p-kicker--lg {
	font-size: 14px;
}

/* "(opcional)" dentro de una etiqueta: vuelve a peso normal y caja baja. */
.ifha-p .ifha-p-label__opt {
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ifha-gray-400);
}

.ifha-p .ifha-p-fineprint {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ifha-gray-400);
}

/* Parrafo explicativo (notas de cotizacion, aclaracion de pago parcial). */
.ifha-p .ifha-p-nota {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ifha-gray-600);
}

/* Los bloques que en el prototipo llevan `margin:-8px 0 0` para pegarse al
   bloque anterior sin romper el ritmo de 20 px de la columna. */
.ifha-p .ifha-p-nota--pegada,
.ifha-p .ifha-p-note--pegada {
	margin-top: -8px;
}

/* Todo importe con cifras de ancho fijo: las columnas no bailan al actualizar. */
.ifha-p .ifha-p-num {
	font-variant-numeric: tabular-nums;
}

/* La referencia del pedido va monoespaciada en todas las pantallas: es lo que
   la persona compara caracter por caracter contra su comprobante. */
.ifha-p .ifha-p-ref {
	font-family: var(--ifha-mono);
	font-weight: 700;
	overflow-wrap: anywhere;
}

/* Solo para lectores de pantalla. */
.ifha-p .ifha-p-sr {
	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;
}

/* -----------------------------------------------------------------------------
 * 6. Pilas (utilidades de columna)
 *
 * El prototipo apila casi todo con `display:flex;flex-direction:column` y un
 * gap distinto por bloque. En vez de repetir eso en cada componente, se declara
 * una vez y se combina: `class="ifha-p-card ifha-p-pila"`.
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-pila {
	display: flex;
	flex-direction: column;
	gap: var(--ifha-space-3);
}

.ifha-p .ifha-p-pila--xs {
	gap: 6px;
}

.ifha-p .ifha-p-pila--sm {
	gap: var(--ifha-space-2);
}

.ifha-p .ifha-p-pila--md {
	gap: 14px;
}

.ifha-p .ifha-p-pila--lg {
	gap: var(--ifha-space-4);
}

.ifha-p .ifha-p-pila--xl {
	gap: 20px;
}

/* El bloque "Proximos pasos" de la pantalla de resultado: 10 px entre el titulo
   y la lista. Es el unico gap de 10 px del prototipo y no entra en la escala de
   arriba; sin esta clase se usaba `--sm` (8 px), que es el valor correcto para
   el envoltorio de cada medio de pago del paso 3 y no para este. */
.ifha-p .ifha-p-pila--proximos {
	gap: 10px;
}

/* -----------------------------------------------------------------------------
 * 7. Indicador de progreso (3 pasos) — rehecho en la 0.21.0
 *
 * ANTES: tres barras de 4 px, un digito suelto y el rotulo en gris. Funcionaba
 * y se veia como un placeholder. AHORA, tres cosas y ninguna decorativa:
 *
 *   · La pastilla numerada dice el estado SIN depender del color: pendiente es
 *     un circulo hueco, el actual es azul lleno con un halo, y el hecho es
 *     verde con un ✓. Quien no distingue azul de verde igual ve tres formas
 *     distintas.
 *   · La barra se RELLENA con `transform: scaleX()` desde la izquierda, que es
 *     lo que hace que avanzar de paso se lea como avanzar y no como un cambio
 *     de color. Va por transform y no por width: es lo unico que el navegador
 *     anima sin recalcular la pagina entera.
 *   · El halo del paso actual es `box-shadow`, NO `border`: un borde empujaria
 *     el layout 4 px en cada estado y las tres columnas bailarian al avanzar.
 *
 * El estado se lee de la clase modificadora o de `aria-current="step"`.
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-pasos {
	display: flex;
	gap: var(--ifha-space-3);
	/* El margen de arriba es el aire que le faltaba: hasta la 0.20.1 el aviso
	   "Retomamos tu inscripcion" y su boton quedaban pegados a la barra. */
	margin: 0 0 var(--ifha-space-6);
	padding: 0;
	list-style: none;
}

.ifha-p .ifha-p-pasos__item {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ifha-p .ifha-p-pasos__item::marker {
	content: none;
}

/* La via: gris clarito siempre; lo que cambia es el relleno de ::after. */
.ifha-p .ifha-p-pasos__barra {
	position: relative;
	display: block;
	overflow: hidden;
	height: 6px;
	border-radius: var(--ifha-radius-pill);
	background: var(--ifha-line-200);
}

.ifha-p .ifha-p-pasos__barra::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--ifha-blue-600);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .45s cubic-bezier(.4, 0, .2, 1), background-color var(--ifha-transition);
}

.ifha-p .ifha-p-pasos__label {
	display: flex;
	align-items: center;
	gap: 8px;
	overflow: hidden;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--ifha-gray-400);
	transition: color var(--ifha-transition);
}

/* La pastilla numerada. `flex: none` para que no la aplaste el texto largo. */
.ifha-p .ifha-p-pasos__glifo {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ifha-white);
	box-shadow: inset 0 0 0 1.5px var(--ifha-line-300);
	color: var(--ifha-gray-400);
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	line-height: 1;
	transition: background-color var(--ifha-transition), box-shadow var(--ifha-transition), color var(--ifha-transition);
}

/* A 390 px el tercer rotulo ("Revisar y pagar") no entra. El prototipo lo corta
   a cuchillo; aca se corta con puntos suspensivos, que es lo mismo de ancho y
   se lee como texto recortado y no como texto roto. */
.ifha-p .ifha-p-pasos__texto {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ── Paso terminado ── */
.ifha-p .ifha-p-pasos__item--hecho .ifha-p-pasos__barra::after {
	background: var(--ifha-green-500);
	transform: scaleX(1);
}

.ifha-p .ifha-p-pasos__item--hecho .ifha-p-pasos__label {
	color: var(--ifha-green-700);
}

.ifha-p .ifha-p-pasos__item--hecho .ifha-p-pasos__glifo {
	background: var(--ifha-green-500);
	box-shadow: none;
	color: var(--ifha-white);
	font-size: 12px;
}

/* ── Paso actual ── */
.ifha-p .ifha-p-pasos__item--actual .ifha-p-pasos__barra::after,
.ifha-p .ifha-p-pasos__item[aria-current="step"] .ifha-p-pasos__barra::after {
	transform: scaleX(1);
}

.ifha-p .ifha-p-pasos__item--actual .ifha-p-pasos__label,
.ifha-p .ifha-p-pasos__item[aria-current="step"] .ifha-p-pasos__label {
	color: var(--ifha-blue-600);
}

.ifha-p .ifha-p-pasos__item--actual .ifha-p-pasos__glifo,
.ifha-p .ifha-p-pasos__item[aria-current="step"] .ifha-p-pasos__glifo {
	background: var(--ifha-blue-600);
	/* Halo: el detalle que separa "esto es un wizard" de "esto es un placeholder".
	   Dos sombras en una: el relleno plano y el anillo tenue de afuera. */
	box-shadow: 0 0 0 4px rgba(36, 92, 169, .13);
	color: var(--ifha-white);
}

@media (max-width: 400px) {
	.ifha-p .ifha-p-pasos {
		gap: var(--ifha-space-2);
	}

	.ifha-p .ifha-p-pasos__label {
		gap: 6px;
		font-size: 10.5px;
		letter-spacing: .04em;
	}

	.ifha-p .ifha-p-pasos__glifo {
		width: 19px;
		height: 19px;
		font-size: 10px;
	}

	/* El halo se achica: a 375 px, 4 px de anillo se comen el aire entre
	   columnas y las pastillas parecen tocarse. */
	.ifha-p .ifha-p-pasos__item--actual .ifha-p-pasos__glifo,
	.ifha-p .ifha-p-pasos__item[aria-current="step"] .ifha-p-pasos__glifo {
		box-shadow: 0 0 0 3px rgba(36, 92, 169, .13);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ifha-p .ifha-p-pasos__barra::after {
		transition: none;
	}
}

/* -----------------------------------------------------------------------------
 * 8. Encabezado de pantalla y secciones
 * -------------------------------------------------------------------------- */

/* H1 + bajada. No lleva gap propio: el h1 ya trae `margin-bottom:6px`. */
.ifha-p .ifha-p-hero {
	margin: 0;
}

.ifha-p .ifha-p-seccion {
	display: flex;
	flex-direction: column;
	gap: var(--ifha-space-3);
}

.ifha-p .ifha-p-seccion__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ifha-space-3);
}

.ifha-p .ifha-p-seccion__meta {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ifha-gray-600);
}

/* -----------------------------------------------------------------------------
 * 9. Tarjetas
 *
 * Blancas, radio 14 px, borde 1 px #D4D9DE. Nunca borde + sombra fuerte a la
 * vez (README seccion 5): son planas y se apoyan solo en el hairline.
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-card {
	background: var(--ifha-white);
	border: 1px solid var(--ifha-line-300);
	border-radius: var(--ifha-radius-md);
	padding: 20px;
}

/* Tarjeta-fila: rotulo + ayuda a la izquierda, segmentado a la derecha
   ("Pagas desde", "¿Ya sos alumno?"). */
.ifha-p .ifha-p-card--fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ifha-space-3) 20px;
	padding: var(--ifha-space-4) 20px;
}

/* La mitad izquierda de la tarjeta-fila. */
.ifha-p .ifha-p-card__texto {
	flex: 1 1 200px;
	min-width: 0;
}

.ifha-p .ifha-p-card__hint {
	margin: 2px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ifha-gray-600);
}

/* Reserva de alto para la ayuda que llega por JavaScript ("Detectamos que estas
   en Argentina…"). La pagina /pagos/ se cachea, asi que el servidor NO puede
   escribir ese texto sin afirmarle a alguien de Uruguay que esta en Argentina:
   se imprime vacia y la completa el catalogo. Sin reserva, la tarjeta crece de
   golpe y empuja todo lo de abajo en la primera vista, que es el unico salto de
   layout de la pantalla. Tres lineas es lo que mide la frase de 900 px para
   arriba, donde la tarjeta es una fila; en celular sigue creciendo, pero menos. */
.ifha-p .ifha-p-card__hint--reserva {
	min-height: calc(1.5em * 3);
}

/* Tarjeta de datos: el ultimo bloque es una fila de tabla que ya trae su propio
   aire abajo, asi que el padding inferior baja a 4 px. */
.ifha-p .ifha-p-card--flush {
	padding: var(--ifha-space-4) 20px var(--ifha-space-1);
}

/* Tarjeta de resumen (paso 3): las filas ponen su propio padding vertical. */
.ifha-p .ifha-p-card--filas {
	padding: var(--ifha-space-1) 20px;
}

.ifha-p .ifha-p-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ifha-space-2) var(--ifha-space-3);
	padding-bottom: var(--ifha-space-2);
}

.ifha-p .ifha-p-card__sub {
	font-size: 12.5px;
	color: var(--ifha-gray-600);
}

/* Sub-panel gris dentro de una tarjeta (datos del alumno, datos de facturacion,
   importe libre). */
.ifha-p .ifha-p-subpanel {
	padding: var(--ifha-space-4);
	border-radius: var(--ifha-radius-sm);
	background: var(--ifha-surface-100);
}

.ifha-p .ifha-p-subpanel--campo {
	padding: 14px var(--ifha-space-4);
}

/* -----------------------------------------------------------------------------
 * 10. Segmentado (pildoras "Pagas desde" y "¿Ya sos alumno?")
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-seg {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	gap: var(--ifha-space-2);
}

.ifha-p .ifha-p-seg__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ifha-hit);
	padding: 10px 18px;
	border: 1.5px solid var(--ifha-line-300);
	border-radius: var(--ifha-radius-pill);
	background: var(--ifha-white);
	color: var(--ifha-ink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: var(--ifha-transition);
}

.ifha-p .ifha-p-seg__btn:hover,
.ifha-p .ifha-p-seg__btn:focus {
	border-color: var(--ifha-gray-400);
	background: var(--ifha-white);
	color: var(--ifha-ink);
}

.ifha-p .ifha-p-seg__btn.is-activo,
.ifha-p .ifha-p-seg__btn[aria-checked="true"],
.ifha-p .ifha-p-seg__btn[aria-pressed="true"] {
	border-color: var(--ifha-blue-600);
	background: var(--ifha-blue-600);
	color: var(--ifha-white);
}

.ifha-p .ifha-p-seg__btn.is-activo:hover,
.ifha-p .ifha-p-seg__btn[aria-checked="true"]:hover,
.ifha-p .ifha-p-seg__btn[aria-pressed="true"]:hover {
	border-color: var(--ifha-blue-800);
	background: var(--ifha-blue-800);
	color: var(--ifha-white);
}

.ifha-p .ifha-p-seg__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* Variante con radio real (sin JS): la pildora es un <label> con el radio
   escondido adentro. Va en un bloque aparte porque `:has()` invalida TODA la
   lista de selectores donde aparece en los navegadores que no lo soportan, y se
   llevaria puesto el estado seleccionado de la variante con boton. Por lo mismo
   el foco se lee de `:has(:focus-visible)` y no de `:focus-within`: este ultimo
   tambien se enciende al hacer clic con el mouse. */
.ifha-p .ifha-p-seg__btn:has(> .ifha-p-seg__input:checked) {
	border-color: var(--ifha-blue-600);
	background: var(--ifha-blue-600);
	color: var(--ifha-white);
}

.ifha-p .ifha-p-seg__btn:has(> .ifha-p-seg__input:focus-visible) {
	outline: 2px solid var(--ifha-focus);
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
 * 11. Radio-cards (programa, tipo de abono, medio de pago)
 *
 * Tarjeta clicable con un punto de radio dibujado a mano: circulo de 20 px,
 * borde de 2 px del color del estado, relleno del mismo color y un anillo
 * blanco de 3 px por dentro (box-shadow inset). Sin seleccionar, el relleno es
 * blanco y el borde gris.
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-radios {
	display: grid;
	gap: 10px;
}

.ifha-p .ifha-p-radios--sm {
	gap: var(--ifha-space-2);
}

/* El grupo "Tipo de abono" arranca 8 px mas abajo que el select de edicion. */
.ifha-p .ifha-p-radios--sep {
	margin-top: var(--ifha-space-2);
}

.ifha-p .ifha-p-radio {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 64px;
	padding: var(--ifha-space-4) 18px;
	border: 1.5px solid var(--ifha-line-300);
	border-radius: var(--ifha-radius-md);
	background: var(--ifha-white);
	color: var(--ifha-ink);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
	transition: var(--ifha-transition);
}

.ifha-p .ifha-p-radio:hover,
.ifha-p .ifha-p-radio:focus {
	border-color: var(--ifha-gray-400);
	background: var(--ifha-white);
	color: var(--ifha-ink);
}

/* Variante chica: tipo de abono. Radio 8 px, alto minimo 56 px. */
.ifha-p .ifha-p-radio--sm {
	min-height: 56px;
	padding: var(--ifha-space-3) 14px;
	border-radius: var(--ifha-radius-sm);
}

.ifha-p .ifha-p-radio__dot {
	flex: none;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	border: 2px solid var(--ifha-gray-400);
	border-radius: 50%;
	background: var(--ifha-white);
	box-shadow: inset 0 0 0 3px #fff;
	transition: var(--ifha-transition);
}

.ifha-p .ifha-p-radio__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* Linea del titulo: nombre + etiquetas. */
.ifha-p .ifha-p-radio__linea {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ifha-space-2);
}

.ifha-p .ifha-p-radio__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.ifha-p .ifha-p-radio--sm .ifha-p-radio__title {
	font-size: 15px;
}

.ifha-p .ifha-p-radio__meta {
	font-size: 13px;
	line-height: 1.4;
	color: var(--ifha-gray-600);
}

.ifha-p .ifha-p-radio__amount {
	flex: none;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Estado seleccionado: borde y punto azules, fondo con el tinte #F0F5FC. */
.ifha-p .ifha-p-radio.is-activo,
.ifha-p .ifha-p-radio[aria-checked="true"] {
	border-color: var(--ifha-blue-600);
	background: var(--ifha-blue-50);
}

.ifha-p .ifha-p-radio.is-activo:hover,
.ifha-p .ifha-p-radio[aria-checked="true"]:hover {
	border-color: var(--ifha-blue-600);
	background: var(--ifha-blue-50);
}

.ifha-p .ifha-p-radio.is-activo .ifha-p-radio__dot,
.ifha-p .ifha-p-radio[aria-checked="true"] .ifha-p-radio__dot {
	border-color: var(--ifha-blue-600);
	background: var(--ifha-blue-600);
}

.ifha-p .ifha-p-radio__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* Variante con radio real (sin JS). Bloque aparte por lo mismo que en el
   segmentado: un `:has()` desconocido invalida toda la lista de selectores. */
.ifha-p .ifha-p-radio:has(> .ifha-p-radio__input:checked) {
	border-color: var(--ifha-blue-600);
	background: var(--ifha-blue-50);
}

.ifha-p .ifha-p-radio:has(> .ifha-p-radio__input:checked) .ifha-p-radio__dot {
	border-color: var(--ifha-blue-600);
	background: var(--ifha-blue-600);
}

.ifha-p .ifha-p-radio:has(> .ifha-p-radio__input:focus-visible) {
	outline: 2px solid var(--ifha-focus);
	outline-offset: 2px;
}

/* Deshabilitada (Masterclass en suspenso). */
.ifha-p .ifha-p-radio[disabled],
.ifha-p .ifha-p-radio[aria-disabled="true"] {
	background: var(--ifha-surface-100);
	border-color: var(--ifha-line-200);
	color: var(--ifha-gray-400);
	cursor: not-allowed;
}

.ifha-p .ifha-p-radio[disabled] .ifha-p-radio__meta,
.ifha-p .ifha-p-radio[aria-disabled="true"] .ifha-p-radio__meta {
	color: var(--ifha-gray-400);
}

/* -----------------------------------------------------------------------------
 * 12. Etiquetas de radio-card y chips
 *
 * `.ifha-p-tag` es la etiqueta chica de 10,5 px que va dentro de una radio-card
 * (comision, tipo de confirmacion, "Pago parcial"). `.ifha-p-chip` es el chip de
 * 12 px que usan los correos y la pagina de gracias.
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-tag {
	display: inline-flex;
	align-items: center;
	padding: 3px var(--ifha-space-2);
	border-radius: var(--ifha-radius-pill);
	background: var(--ifha-surface-100);
	color: var(--ifha-gray-600);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Sin comision. */
.ifha-p .ifha-p-tag--ok {
	background: var(--ifha-green-50);
	color: var(--ifha-green-800);
}

/* Confirmacion inmediata / "Pago parcial". */
.ifha-p .ifha-p-tag--info {
	background: var(--ifha-blue-100);
	color: var(--ifha-blue-900);
}

.ifha-p .ifha-p-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--ifha-space-1);
	padding: var(--ifha-space-1) var(--ifha-space-3);
	border-radius: var(--ifha-radius-pill);
	background: var(--ifha-blue-100);
	color: var(--ifha-blue-900);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

.ifha-p .ifha-p-chip--neutral {
	background: var(--ifha-surface-100);
	color: var(--ifha-gray-600);
}

.ifha-p .ifha-p-chip--ok {
	background: var(--ifha-green-50);
	color: var(--ifha-green-800);
}

/* -----------------------------------------------------------------------------
 * 13. Campos: select, texto, importe en USD, telefono, casillas
 * -------------------------------------------------------------------------- */

/* Rejilla del formulario del paso 2: dos columnas desde 240 px de ancho util,
   una sola abajo de eso. `min()` evita el desborde a 390 px. */
.ifha-p .ifha-p-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: var(--ifha-space-4);
}

.ifha-p .ifha-p-campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

/* Ocupa la fila entera de la rejilla. */
.ifha-p .ifha-p-campo--full,
.ifha-p .ifha-p-full {
	grid-column: 1 / -1;
}

.ifha-p .ifha-p-input,
.ifha-p .ifha-p-select {
	width: 100%;
	box-sizing: border-box;
	min-height: var(--ifha-hit);
	border: 1px solid var(--ifha-line-300);
	border-radius: var(--ifha-radius-sm);
	background: var(--ifha-white);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	color: var(--ifha-ink);
	transition: var(--ifha-transition);
}

.ifha-p .ifha-p-input {
	padding: 11px 14px;
}

.ifha-p .ifha-p-select {
	padding: 10px 14px;
}

.ifha-p .ifha-p-input:hover,
.ifha-p .ifha-p-select:hover {
	border-color: var(--ifha-gray-400);
}

.ifha-p .ifha-p-input:focus,
.ifha-p .ifha-p-select:focus {
	border-color: var(--ifha-blue-600);
}

/* Error: borde rojo. Se lee de `aria-invalid="true"` (que es lo que ya pone el
   marcado accesible) o de la clase. */
.ifha-p .ifha-p-input[aria-invalid="true"],
.ifha-p .ifha-p-select[aria-invalid="true"],
.ifha-p .ifha-p-input.is-error,
.ifha-p .ifha-p-select.is-error,
.ifha-p .ifha-p-usd.is-error,
.ifha-p .ifha-p-usd[data-error="1"] {
	border-color: var(--ifha-red-500);
}

.ifha-p .ifha-p-error {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--ifha-red-500);
}

/* Ayuda bajo el campo. */
.ifha-p .ifha-p-hint {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ifha-gray-400);
}

/* Aviso de que cambio la zona al elegir otro pais. */
.ifha-p .ifha-p-hint--info {
	color: var(--ifha-blue-800);
}

/* Avisos de arriba de todo: "Retomamos tu inscripcion..." con su boton, y la
   confirmacion de la baja. Hasta la 0.20.1 no tenian ni caja ni margen, asi
   que el boton "Empezar de cero" quedaba pegado a la barra de progreso —lo
   que reporto Lucas el 21-sep-2026—. Ahora son una tarjeta con aire propio. */
.ifha-p > .ifha-p-hint--info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ifha-space-3);
	margin: 0 0 var(--ifha-space-5);
	padding: 12px var(--ifha-space-4);
	border-radius: var(--ifha-radius-sm);
	background: var(--ifha-blue-100);
	font-size: 13.5px;
}

.ifha-p > .ifha-p-hint--info > span {
	flex: 1 1 200px;
	min-width: 0;
}

/* Codigo de descuento o beca (0.20.0): campo y boton en una linea; en el
   telefono se apilan para que el boton no quede de 70 px. El input va en
   mayusculas porque el codigo se normaliza asi en el servidor. */
.ifha-p .ifha-p-codigo {
	display: flex;
	align-items: stretch;
	gap: var(--ifha-space-2);
}

.ifha-p .ifha-p-codigo .ifha-p-input {
	flex: 1 1 auto;
	min-width: 0;
	text-transform: uppercase;
}

.ifha-p .ifha-p-codigo .ifha-p-btn {
	flex: 0 0 auto;
}

@media (max-width: 420px) {
	.ifha-p .ifha-p-codigo {
		flex-direction: column;
	}
}

/* Ficha de «codigo aplicado»: reemplaza al campo, no convive con el. */
.ifha-p .ifha-p-codigo__ok {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ifha-space-2);
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--ifha-green-800);
}

.ifha-p .ifha-p-codigo__quitar {
	padding: 0;
	border: 0;
	background: none;
	color: var(--ifha-gray-600);
	font: inherit;
	font-size: 12.5px;
	text-decoration: underline;
	cursor: pointer;
}

.ifha-p .ifha-p-codigo__quitar:hover,
.ifha-p .ifha-p-codigo__quitar:focus {
	color: var(--ifha-ink);
}

/* Lineas del descuento y del total con codigo en «Tu inscripcion». */
.ifha-p .ifha-p-aside__fila--descuento .ifha-p-aside__v {
	color: var(--ifha-green-800);
	font-weight: 700;
}

.ifha-p .ifha-p-aside__fila--total .ifha-p-aside__v {
	font-weight: 700;
}

/* Campo de importe con prefijo USD pegado. El borde lo dibuja el contenedor,
   nunca el input: si no, se ven dos lineas. */
.ifha-p .ifha-p-usd {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	border: 1px solid var(--ifha-line-300);
	border-radius: var(--ifha-radius-sm);
	background: var(--ifha-white);
	transition: var(--ifha-transition);
}

.ifha-p .ifha-p-usd:focus-within {
	border-color: var(--ifha-blue-600);
}

.ifha-p .ifha-p-usd__pre {
	display: flex;
	flex: none;
	align-items: center;
	padding: 0 14px;
	border-right: 1px solid var(--ifha-line-300);
	background: var(--ifha-surface-100);
	font-size: 15px;
	font-weight: 700;
	color: var(--ifha-gray-600);
}

.ifha-p .ifha-p-usd__input {
	flex: 1;
	min-width: 0;
	min-height: var(--ifha-hit);
	padding: 11px 14px;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 15px;
	color: var(--ifha-ink);
	font-variant-numeric: tabular-nums;
}

.ifha-p .ifha-p-usd__input:focus,
.ifha-p .ifha-p-usd__input:focus-visible {
	outline: 0;
}

/* Equivalente en ARS debajo del importe. */
.ifha-p .ifha-p-equiv {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--ifha-ink);
	font-variant-numeric: tabular-nums;
}

/* Telefono: prefijo internacional de 84 px + numero. */
.ifha-p .ifha-p-tel {
	display: flex;
	gap: var(--ifha-space-2);
}

.ifha-p .ifha-p-tel__pre {
	width: 84px;
	flex: none;
	padding: 11px var(--ifha-space-3);
	text-align: center;
}

.ifha-p .ifha-p-tel__num {
	flex: 1;
	min-width: 0;
}

/* Casilla + texto. El objetivo tactil lo da el alto de la linea de texto mas el
   padding: la casilla sola mide 20 px, pero el area clicable es toda la fila. */
.ifha-p .ifha-p-check {
	display: flex;
	align-items: flex-start;
	gap: var(--ifha-space-3);
	min-height: var(--ifha-hit);
	margin: 0;
	cursor: pointer;
}

.ifha-p .ifha-p-check--sep {
	padding-top: var(--ifha-space-1);
}

.ifha-p .ifha-p-check__box {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--ifha-blue-600);
	cursor: pointer;
}

.ifha-p .ifha-p-check__text {
	font-size: 15px;
	line-height: 1.4;
}

.ifha-p .ifha-p-check__muted {
	color: var(--ifha-gray-600);
}

/* -----------------------------------------------------------------------------
 * 14. Fila de total en celular (pasos 1 y 2, abajo de 900 px)
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-total-movil {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ifha-space-3);
	padding: var(--ifha-space-3) var(--ifha-space-4);
	border: 1px solid var(--ifha-line-300);
	border-radius: var(--ifha-radius-sm);
	background: var(--ifha-white);
}

.ifha-p .ifha-p-total-movil__k {
	font-size: 13px;
	color: var(--ifha-gray-600);
}

.ifha-p .ifha-p-total-movil__v {
	font-size: 18px;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
 * 15. Panel lateral "Tu pago"
 *
 * Solo desde 900 px. Abajo de eso no se renderiza visualmente (queda oculto) y
 * su lugar lo toma la fila de total de celular. Pegajoso a 24 px del borde.
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-aside {
	display: none;
	flex: 0 1 var(--ifha-aside);
	flex-direction: column;
	gap: var(--ifha-space-3);
	align-self: flex-start;
	min-width: 260px;
	padding: 20px;
	border: 1px solid var(--ifha-line-300);
	border-radius: var(--ifha-radius-md);
	background: var(--ifha-white);
}

.ifha-p .ifha-p-aside__fila {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--ifha-space-2) 0;
	border-bottom: 1px solid var(--ifha-line-200);
}

.ifha-p .ifha-p-aside__k {
	font-size: 12px;
	color: var(--ifha-gray-600);
}

.ifha-p .ifha-p-aside__v {
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.ifha-p .ifha-p-aside__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ifha-space-3);
	padding-top: 6px;
}

.ifha-p .ifha-p-aside__total-k {
	font-size: 14px;
	font-weight: 700;
}

.ifha-p .ifha-p-aside__total-v {
	font-size: 20px;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
}

.ifha-p .ifha-p-aside__vacio {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ifha-gray-600);
}

.ifha-p .ifha-p-aside__pie {
	margin: var(--ifha-space-1) 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ifha-gray-400);
}

/* -----------------------------------------------------------------------------
 * 16. Resumen de filas clave/valor (paso 3 y resultado, marcado con div)
 *
 * La version en tabla, que se comparte con los correos, esta en la seccion 18.
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-resumen__fila {
	display: flex;
	justify-content: space-between;
	gap: var(--ifha-space-4);
	padding: 14px 0;
	border-bottom: 1px solid var(--ifha-line-200);
}

.ifha-p .ifha-p-resumen__k {
	flex: none;
	font-size: 14px;
	color: var(--ifha-gray-600);
}

.ifha-p .ifha-p-resumen__v {
	min-width: 0;
	font-size: 15px;
	font-weight: 500;
	text-align: right;
	overflow-wrap: anywhere;
}

.ifha-p .ifha-p-resumen__v--num {
	font-variant-numeric: tabular-nums;
}

/* Nota de cotizacion: ocupa la fila entera y no tiene columna de valor. */
.ifha-p .ifha-p-resumen__nota {
	padding: var(--ifha-space-3) 0;
	border-bottom: 1px solid var(--ifha-line-200);
	font-size: 13px;
	line-height: 1.5;
	color: var(--ifha-gray-600);
}

.ifha-p .ifha-p-resumen__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ifha-space-4);
	padding: var(--ifha-space-4) 0 14px;
}

.ifha-p .ifha-p-resumen__total-k {
	font-size: 15px;
	font-weight: 700;
}

.ifha-p .ifha-p-resumen__total-v {
	font-size: 24px;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
}

/* En la pantalla de resultado el total es mas chico (20 px) y las filas tienen
   12 px de padding. */
.ifha-p .ifha-p-resumen--res .ifha-p-resumen__fila {
	padding: var(--ifha-space-3) 0;
}

.ifha-p .ifha-p-resumen--res .ifha-p-resumen__total {
	padding: 14px 0;
}

.ifha-p .ifha-p-resumen--res .ifha-p-resumen__total-v {
	font-size: 20px;
}

/* -----------------------------------------------------------------------------
 * 17. Banda azul de instrucciones (importe exacto + referencia)
 *
 * Dos marcados posibles, mismo resultado:
 *  · TABLA — la que usa templates/emails/partials/instrucciones.php, que se
 *    comparte con el correo y por eso no puede usar flexbox.
 *  · DIV/FLEX con `.ifha-p-band__col` — para pantallas que se arman solo para la
 *    web (por ejemplo la pagina de comprobante).
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-band {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--ifha-blue-600);
	color: var(--ifha-white);
	border-radius: var(--ifha-radius-md);
	overflow: hidden;
}

/* Version div: fila flexible con las dos mitades separadas a los extremos. */
.ifha-p div.ifha-p-band {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--ifha-space-3) var(--ifha-space-5);
	padding: 18px 20px;
}

.ifha-p .ifha-p-band td {
	padding: 18px 20px;
	vertical-align: top;
	text-align: left;
}

.ifha-p .ifha-p-band__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-width: 0;
}

.ifha-p .ifha-p-band__k {
	display: block;
	margin-bottom: var(--ifha-space-1);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ifha-white);
	opacity: .85;
}

.ifha-p .ifha-p-band__col .ifha-p-band__k {
	margin-bottom: 0;
}

.ifha-p .ifha-p-band__amount {
	display: block;
	font-size: 26px;
	font-weight: 900;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.ifha-p .ifha-p-band__ref {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	text-align: left;
}

.ifha-p .ifha-p-band__ref code,
.ifha-p .ifha-p-band__ref .ifha-p-ref {
	font-family: var(--ifha-mono);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--ifha-white);
	background: none;
	padding: 0;
	overflow-wrap: anywhere;
}

/* Boton Copiar: pildora de contorno verde sobre el azul. El prototipo lo dibuja
   de 32 px de alto; aca va a 44 px porque el sistema pide ese objetivo tactil
   minimo y este boton se usa desde el celular, con la mano, mientras la persona
   tiene el homebanking abierto. Es la unica medida que se aparta del prototipo
   a proposito: el padding es el suyo (4px 12px), porque con 44 px de alto el
   vertical ya no manda y ensanchar la pildora le roba lugar a la referencia
   monoespaciada justo a 390 px, que es donde menos hay. */
.ifha-p .ifha-p-copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ifha-hit);
	padding: var(--ifha-space-1) var(--ifha-space-3);
	border: 1.5px solid var(--ifha-green-500);
	border-radius: var(--ifha-radius-pill);
	background: transparent;
	color: var(--ifha-white);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: var(--ifha-transition);
}

.ifha-p .ifha-p-copy:hover,
.ifha-p .ifha-p-copy:focus {
	background: var(--ifha-green-500);
	color: var(--ifha-green-900);
}

/* El bloque de instrucciones trae sus propios margenes (los necesita para el
   correo): se le saca el ultimo para que no sume al gap del contenedor.

   POR QUE LLEVA `!important`, que en el resto de la hoja esta prohibido: el
   ultimo hijo de `.ifha-p-instr` es casi siempre la ultima
   `<table class="ifha-p-instr__card">` del parcial compartido con el correo, y
   ese marcado trae `style="…margin:0 0 16px…"` EN LINEA porque Gmail y Outlook
   no leen hojas externas. Un estilo en linea le gana a cualquier selector, asi
   que sin el `!important` esta regla no hacia absolutamente nada y quedaban 16
   px de sobra debajo de la ultima tarjeta de banco, sumados al gap de 20 px de
   la columna. Es el mismo caso —y la misma salida— que el bloque de 599 px de
   la seccion 25, que tambien tiene que pisar los estilos en linea del parcial.
   No es licencia para usarlo en otro lado: solo aplica donde el marcado que se
   comparte con el correo obliga. */
.ifha-p .ifha-p-instr > :last-child {
	margin-bottom: 0 !important;
}

/* Tarjeta de datos bancarios del parcial compartido con el correo. Ahi viaja con
   todos sus estilos en linea; esta regla existe para que en la web se vea igual
   aunque algun dia se rendericen sin ellos, y para que el reset de tablas de la
   seccion 3 no le borre el fondo y el borde. */
.ifha-p table.ifha-p-instr__card {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--ifha-white);
	border: 1px solid var(--ifha-line-300);
	border-radius: var(--ifha-radius-md);
}

/* -----------------------------------------------------------------------------
 * 18. Filas de datos en tabla (cuentas bancarias, resumen del correo)
 *
 * Todas las filas llevan linea arriba, incluida la primera: en el prototipo hay
 * un hairline entre el encabezado de la tarjeta ("Banco BBVA · Cuenta en pesos")
 * y el primer dato.
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-datos {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

.ifha-p .ifha-p-datos td {
	padding: var(--ifha-space-3) 0;
	border-top: 1px solid var(--ifha-line-200);
	vertical-align: top;
}

/* El selector lleva `td` a proposito: `.ifha-p .ifha-p-datos td` es (0,2,1) y su
   atajo `padding` pisa cualquier `padding-right` declarado con (0,2,0). Con
   `td.ifha-p-datos__k` quedamos en (0,3,1) y el aire de 16 px entre la etiqueta
   y el valor (el `gap` de la fila flexible del prototipo) sobrevive. */
.ifha-p .ifha-p-datos td.ifha-p-datos__k,
.ifha-p .ifha-p-datos__k {
	font-size: 14px;
	color: var(--ifha-gray-600);
	white-space: nowrap;
	padding-right: var(--ifha-space-4);
}

.ifha-p .ifha-p-datos__v {
	font-size: 15px;
	font-weight: 500;
	text-align: right;
	overflow-wrap: anywhere;
	font-variant-numeric: tabular-nums;
	/* El CBU y el alias se copian a mano: un clic selecciona el valor entero. */
	-webkit-user-select: all;
	user-select: all;
}

/* Fila de total: mas peso, sin linea inferior. El aire de abajo son los 14 px
   del prototipo (`padding:14px 0` en la ultima fila de la tarjeta de resultado):
   sin el, el importe queda pegado al titulo "Proximos pasos" que viene despues. */
.ifha-p .ifha-p-datos__total td {
	border-top: 1px solid var(--ifha-line-200);
	padding-top: var(--ifha-space-4);
	padding-bottom: 14px;
}

/* La excepcion es la tarjeta de datos bancarios, que ya aporta sus propios 4 px
   abajo (`.ifha-p-card--flush`): ahi el total cierra la tarjeta y 14 px mas
   serian un hueco. */
.ifha-p .ifha-p-card--flush .ifha-p-datos__total td {
	padding-bottom: 0;
}

.ifha-p .ifha-p-datos__total .ifha-p-datos__k {
	font-size: 15px;
	font-weight: 700;
	color: var(--ifha-ink);
}

.ifha-p .ifha-p-datos__total .ifha-p-datos__v {
	font-size: 20px;
	font-weight: 900;
	-webkit-user-select: auto;
	user-select: auto;
}

/* -----------------------------------------------------------------------------
 * 19. Nota destacada
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-note {
	margin: 0;
	padding: 14px var(--ifha-space-4);
	border: 1px solid var(--ifha-blue-100);
	border-radius: var(--ifha-radius-sm);
	background: var(--ifha-blue-50);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ifha-blue-900);
}

/* -----------------------------------------------------------------------------
 * 20. Tarjeta de comprobante
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-proof {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* El parrafo de 14 px es SOLO el del intro. La regla no puede alcanzar a toda la
   tarjeta: `.ifha-p .ifha-p-proof p` es (0,2,1) y le ganaba a
   `.ifha-p .ifha-p-fineprint` (0,2,0), asi que la letra chica del aviso ("Subir
   un comprobante no confirma el pago…") salia a 14 px gris-600 en vez de los
   12,5 px gris-400 del prototipo y competia con el parrafo principal. Acotada al
   envoltorio del intro, cualquier bloque nuevo que entre en la tarjeta conserva
   su propio estilo. */
.ifha-p .ifha-p-proof__intro p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ifha-gray-600);
}

.ifha-p .ifha-p-proof__intro {
	margin: 0;
}

.ifha-p .ifha-p-proof__intro .ifha-p-h2 {
	margin: 0 0 var(--ifha-space-1);
}

.ifha-p .ifha-p-proof strong {
	color: var(--ifha-ink);
	font-weight: 700;
	overflow-wrap: anywhere;
}

/* Caja punteada para adjuntar. Sirve igual como <label> con un input de archivo
   escondido adentro (fase b) o como <a> hacia la pagina de comprobante (fase a):
   las dos miden lo mismo, asi que cambiar una por otra no mueve un pixel. */
/* El numero de control de Western Union. Usa los mismos campos que el resto del
   centro de pagos; lo unico propio es el aire que lo separa del selector de
   archivo, para que se lean como dos pasos y no como un bloque. */
.ifha-p .ifha-p-proof__mtcn {
	margin: 0 0 16px;
}

.ifha-p .ifha-p-proof__file,
.ifha-p .ifha-p-proof__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 64px;
	padding: var(--ifha-space-4);
	overflow: hidden;
	border: 1.5px dashed var(--ifha-gray-400);
	border-radius: var(--ifha-radius-sm);
	background: var(--ifha-surface-50);
	color: var(--ifha-blue-600);
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	cursor: pointer;
	transition: var(--ifha-transition);
}

.ifha-p .ifha-p-proof__file:hover,
.ifha-p .ifha-p-proof__link:hover,
.ifha-p .ifha-p-proof__link:focus {
	border-color: var(--ifha-blue-600);
	background: var(--ifha-blue-50);
	text-decoration: none;
}

/* El input de archivo se esconde, no se elimina: sigue siendo el que recibe el
   foco del teclado, y por eso el contorno lo dibuja la caja. */
.ifha-p .ifha-p-proof__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}

.ifha-p .ifha-p-proof__file:focus-within {
	outline: 2px solid var(--ifha-focus);
	outline-offset: 2px;
	border-color: var(--ifha-blue-600);
}

/* -----------------------------------------------------------------------------
 * 21. Pantalla de resultado
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-res {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 28px 20px;
}

.ifha-p .ifha-p-res__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

/* Circulo con glifo. El color lo pone el modificador de estado; el gris es el
   valor por defecto para que un estado desconocido no quede sin color. */
.ifha-p .ifha-p-res__circle {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 2px solid var(--ifha-gray-600);
	border-radius: 50%;
	color: var(--ifha-gray-600);
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
}

.ifha-p .ifha-p-res__badge {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ifha-gray-600);
}

.ifha-p .ifha-p-res__title {
	margin: 0;
	font-size: 28px;
	line-height: 1.15;
	font-weight: 900;
	letter-spacing: -.01em;
	color: var(--ifha-ink);
	text-wrap: pretty;
}

.ifha-p .ifha-p-res__lead {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ifha-gray-600);
	overflow-wrap: anywhere;
}

/* Contenedor de la tabla del resultado: linea de arriba y nada mas. */
.ifha-p .ifha-p-res__tabla {
	border-top: 1px solid var(--ifha-line-200);
}

.ifha-p .ifha-p-res--aprobado .ifha-p-res__circle,
.ifha-p .ifha-p-res--aprobado .ifha-p-res__badge {
	border-color: var(--ifha-green-700);
	color: var(--ifha-green-700);
}

.ifha-p .ifha-p-res--pendiente .ifha-p-res__circle,
.ifha-p .ifha-p-res--pendiente .ifha-p-res__badge {
	border-color: var(--ifha-amber-500);
	color: var(--ifha-amber-500);
}

.ifha-p .ifha-p-res--transfer-pending .ifha-p-res__circle,
.ifha-p .ifha-p-res--transfer-pending .ifha-p-res__badge {
	border-color: var(--ifha-blue-600);
	color: var(--ifha-blue-600);
}

.ifha-p .ifha-p-res--rechazado .ifha-p-res__circle,
.ifha-p .ifha-p-res--rechazado .ifha-p-res__badge {
	border-color: var(--ifha-red-500);
	color: var(--ifha-red-500);
}

.ifha-p .ifha-p-res--cancelado .ifha-p-res__circle,
.ifha-p .ifha-p-res--cancelado .ifha-p-res__badge {
	border-color: var(--ifha-gray-600);
	color: var(--ifha-gray-600);
}

/* -----------------------------------------------------------------------------
 * 22. Proximos pasos
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-next {
	display: flex;
	flex-direction: column;
	gap: var(--ifha-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ifha-p .ifha-p-next li {
	display: flex;
	gap: 10px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.5;
}

.ifha-p .ifha-p-next li::marker {
	content: none;
}

.ifha-p .ifha-p-next__glyph {
	flex: none;
	color: var(--ifha-green-600);
	font-weight: 700;
}

/* -----------------------------------------------------------------------------
 * 23. Botones
 *
 * Primario: verde #92D050 con texto #2A3D14; al hover #6EA837 con texto blanco
 * (el unico par aprobado: blanco sobre el verde vivo no pasa contraste).
 * Secundario: contorno azul de 1,5 px. Los dos son pildora de 999 px y miden
 * 48 px de alto minimo.
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: var(--ifha-space-3) 28px;
	border: 0;
	border-radius: var(--ifha-radius-pill);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: var(--ifha-transition);
}

.ifha-p .ifha-p-btn:hover,
.ifha-p .ifha-p-btn:focus {
	text-decoration: none;
}

.ifha-p .ifha-p-btn__glifo {
	flex: none;
}

.ifha-p .ifha-p-btn--primary,
.ifha-p a.ifha-p-btn--primary {
	background: var(--ifha-green-500);
	color: var(--ifha-green-900);
}

.ifha-p .ifha-p-btn--primary:hover,
.ifha-p .ifha-p-btn--primary:focus,
.ifha-p a.ifha-p-btn--primary:hover,
.ifha-p a.ifha-p-btn--primary:focus {
	background: var(--ifha-green-600);
	color: var(--ifha-white);
}

.ifha-p .ifha-p-btn--secondary,
.ifha-p a.ifha-p-btn--secondary {
	padding: var(--ifha-space-3) var(--ifha-space-5);
	border: 1.5px solid var(--ifha-blue-600);
	background: transparent;
	color: var(--ifha-blue-600);
}

.ifha-p .ifha-p-btn--secondary:hover,
.ifha-p .ifha-p-btn--secondary:focus,
.ifha-p a.ifha-p-btn--secondary:hover,
.ifha-p a.ifha-p-btn--secondary:focus {
	background: var(--ifha-blue-50);
	color: var(--ifha-blue-600);
}

/* El CTA del paso 3 crece hasta 400 px para que el importe entre completo. */
.ifha-p .ifha-p-btn--ancho {
	flex: 1 1 auto;
	max-width: 400px;
}

/* Procesando. El boton queda gris con cursor de espera; el secundario, en
   cambio, conserva su forma (en el prototipo tampoco cambia) y solo se apaga. */
.ifha-p .ifha-p-btn[disabled],
.ifha-p .ifha-p-btn[aria-disabled="true"],
.ifha-p .ifha-p-btn[aria-busy="true"] {
	cursor: wait;
}

.ifha-p .ifha-p-btn--primary[disabled],
.ifha-p .ifha-p-btn--primary[aria-disabled="true"],
.ifha-p .ifha-p-btn--primary[aria-busy="true"],
.ifha-p .ifha-p-btn--primary.is-procesando,
.ifha-p .ifha-p-btn--primary[disabled]:hover,
.ifha-p .ifha-p-btn--primary[aria-busy="true"]:hover,
.ifha-p .ifha-p-btn--primary.is-procesando:hover {
	background: var(--ifha-line-200);
	border-color: var(--ifha-line-200);
	color: var(--ifha-gray-600);
}

.ifha-p .ifha-p-btn--secondary[disabled],
.ifha-p .ifha-p-btn--secondary[aria-disabled="true"] {
	opacity: .6;
}

/* Rueda de espera. La animacion se llama ifhaSpin igual que en el prototipo. */
.ifha-p .ifha-p-btn__spinner {
	display: inline-block;
	flex: none;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: ifhaSpin .8s linear infinite;
}

@keyframes ifhaSpin {

	to {
		transform: rotate(360deg);
	}
}

/* Fila de acciones: en celular los botones se apilan a ancho completo; desde
   480 px vuelven a la linea, el secundario a la izquierda. */
.ifha-p .ifha-p-actions {
	display: flex;
	flex-direction: column;
	gap: var(--ifha-space-3);
}

.ifha-p .ifha-p-actions .ifha-p-btn {
	width: 100%;
}

/* Bloque de acciones + nota al pie del CTA (paso 3). */
.ifha-p .ifha-p-cta {
	display: flex;
	flex-direction: column;
	gap: var(--ifha-space-3);
}

.ifha-p .ifha-p-cta__nota {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ifha-gray-400);
	text-align: right;
}

/* -----------------------------------------------------------------------------
 * 24. Pie de ayuda por WhatsApp (va en todas las pantallas)
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-help {
	margin: 28px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ifha-gray-600);
	text-align: center;
}

.ifha-p .ifha-p-help a {
	font-weight: 700;
}

/* -----------------------------------------------------------------------------
 * 25. Puntos de quiebre
 * -------------------------------------------------------------------------- */

/* Hasta 599 px: la banda y las filas de datos EN TABLA se apilan. Sin esto, a
   390 px el CBU se parte en tres lineas contra una etiqueta pegada al borde.
   Los `!important` de este bloque son obligatorios: el mismo marcado viaja por
   correo con estilos en linea (ver templates/emails/partials/instrucciones.php)
   y un estilo en linea le gana a cualquier regla de hoja, incluso dentro de una
   media query. Es el unico lugar del plugin donde se usan asi. */
@media (max-width: 599px) {

	/* 16 px y no 15: por debajo de 16, Safari en iOS hace zoom solo al tocar
	   cualquier campo, y con diez campos por inscripcion son diez zooms. */
	.ifha-p .ifha-p-input,
	.ifha-p .ifha-p-select,
	.ifha-p .ifha-p-usd__input,
	.ifha-p textarea.ifha-p-input {
		font-size: 16px;
	}

	.ifha-p table.ifha-p-band,
	.ifha-p table.ifha-p-band tbody,
	.ifha-p table.ifha-p-band tr,
	.ifha-p table.ifha-p-band td {
		display: block !important;
		width: 100% !important;
	}

	.ifha-p table.ifha-p-band td {
		padding: var(--ifha-space-4) !important;
		text-align: left !important;
	}

	.ifha-p table.ifha-p-band td + td {
		padding-top: 0 !important;
	}

	.ifha-p .ifha-p-band__amount {
		font-size: 24px !important;
	}

	.ifha-p .ifha-p-datos,
	.ifha-p .ifha-p-datos tbody,
	.ifha-p .ifha-p-datos tr,
	.ifha-p .ifha-p-datos td {
		display: block !important;
		width: 100% !important;
	}

	.ifha-p .ifha-p-datos td {
		border-top: 0 !important;
		padding: 0 !important;
	}

	.ifha-p .ifha-p-datos tr {
		padding: var(--ifha-space-3) 0;
		border-top: 1px solid var(--ifha-line-200);
	}

	.ifha-p .ifha-p-datos__k {
		white-space: normal;
		margin-bottom: 2px;
	}

	.ifha-p .ifha-p-datos__v {
		text-align: left !important;
	}

	/* El total del resumen si conserva su linea de arriba: es el unico corte
	   que tiene que verse. */
	.ifha-p .ifha-p-datos__total {
		padding-top: var(--ifha-space-4);
	}

	/* Las filas clave/valor con marcado div tambien se apilan: a 390 px un CBU
	   de 22 cifras no entra al lado de su etiqueta. */
	.ifha-p .ifha-p-resumen__fila {
		flex-direction: column;
		gap: 2px;
	}

	.ifha-p .ifha-p-resumen__v {
		text-align: left;
	}
}

/* Desde 480 px los botones vuelven a una fila: el secundario a la izquierda,
   la accion principal a la derecha, como en el prototipo. */
@media (min-width: 480px) {

	.ifha-p .ifha-p-actions {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--ifha-space-3);
	}

	.ifha-p .ifha-p-actions .ifha-p-btn {
		width: auto;
	}

	.ifha-p .ifha-p-actions--start {
		justify-content: flex-start;
	}

	.ifha-p .ifha-p-actions--end {
		justify-content: flex-end;
	}
}

/* Desde 900 px aparece el panel lateral y se va la fila de total de celular.
   Es el unico punto de quiebre propio del prototipo (window.innerWidth >= 900
   en su script). */
@media (min-width: 900px) {

	.ifha-p .ifha-p-aside {
		display: flex;
		position: -webkit-sticky;
		position: sticky;
		top: var(--ifha-space-5);
	}

	.ifha-p .ifha-p-total-movil,
	.ifha-p .ifha-p-solo-movil {
		display: none;
	}
}

/* Sin animacion para quien la desactivo en el sistema operativo. La rueda de
   espera es la unica excepcion: congelada parece un boton roto, asi que gira
   mas lento en vez de quedarse quieta. */
@media (prefers-reduced-motion: reduce) {

	.ifha-p *,
	.ifha-p *::before,
	.ifha-p *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}

	.ifha-p .ifha-p-btn__spinner {
		animation-duration: 1.6s !important;
	}
}

/* -----------------------------------------------------------------------------
 * 26. Utilidades de pagina (body.ifha-pagos)
 *
 * El header y el footer del sitio se aplican tambien a order-pay y a la pagina
 * de gracias (plantillas 28865 / 28860, condicion include/general). El footer
 * trae bloques promocionales que contradicen la regla "sin promociones ni
 * ventas cruzadas" en una pantalla de pago, y el boton flotante de Click to
 * Chat (z-index 99999999) tapa el contenido en celular. Se ocultan solo en las
 * pantallas del plugin: el resto del sitio no se toca.
 *
 * Los !important de esta seccion son necesarios: los bloques del footer y el
 * boton flotante llegan con estilos en linea propios.
 * -------------------------------------------------------------------------- */

body.ifha-pagos {
	background: #F1F4F7;
}

/* CTA "Inscribite al Instituto" del footer, y su envoltorio.
   ⚠️ EL ENVOLTORIO TAMBIEN, y por eso esta la segunda regla: ocultar solo el
   hijo dejaba 40 px de padding vacio en el pie. */
body.ifha-pagos .ifha-f__cta,
body.ifha-pagos .ifha-f__ctawrap {
	display: none !important;
}

/* Banda "Proximas ediciones" del pie.
   ⚠️ SE OCULTA LA BANDA ENTERA (.ifha-f__fechas), no solo los chips de fecha
   (.ifha-f__tile). Hasta la 0.20.1 se ocultaban solo los chips y quedaban el
   titulo "PROXIMAS EDICIONES" y el enlace "VER TODAS LAS FECHAS" flotando
   sobre 133 px de nada: parecia una seccion rota, no una seccion ausente.
   Es lo que reporto Lucas el 21-sep-2026. */
body.ifha-pagos .ifha-f__fechas {
	display: none !important;
}

/* Boton flotante de WhatsApp (plugin Click to Chat). El pie de ayuda del
   centro de pagos ya ofrece el mismo canal, sin tapar el formulario. */
body.ifha-pagos #ht-ctc-chat {
	display: none !important;
}

/* El bloque "Sin experiencia previa / Cupos limitados / Cuotas sin interes"
   (.ifha-f__ventajas) NO necesita regla propia: vive DENTRO de .ifha-f__cta,
   asi que ya se va con el. Verificado en el pie servido el 21-sep-2026. */

/* -----------------------------------------------------------------------------
 * 27. `.ifha-p-pago` — la caja de campos de cada medio (paso 3)
 *
 * QUE ES: el `div.payment_box.payment_method_{id}` donde WooCommerce imprime
 * `payment_fields()`. Payway y PayPal lo buscan por ESAS clases exactas, asi que
 * el contenedor no se puede renombrar; `.ifha-p-pago` es el gancho de diseño que
 * se le agrega al lado y `.ifha-p-subpanel` el que le da el fondo gris.
 *
 * POR QUE ESTAS REGLAS VIVEN ACA Y NO EN LA PLANTILLA: woocommerce.css y
 * woocommerce-layout.css pintan `#payment` y `div.payment_box` con su caja gris
 * #dfdcde y su triangulito, y sus selectores llevan un id
 * (`.woocommerce-checkout #payment div.payment_box`), asi que ninguna clase de
 * esta hoja les gana. Hay que igualar la especificidad con otro id, y por eso
 * estos selectores llevan `#payment`. Estuvieron un tiempo en un `<style>` en
 * linea dentro de templates/checkout/form-pay.php, contra la regla 0.8 del
 * contrato de diseño: eran dos fuentes de verdad para la misma pantalla y el dia
 * que alguien borrara el bloque "porque el estilo va en la hoja", el paso 3
 * volvia a salir gris. Es apagado puro: ni un token ni un color nuevo.
 * -------------------------------------------------------------------------- */

body.ifha-pagos .ifha-p #payment {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

/* Las dos formas del mismo selector: `.ifha-p-pago` es la clase de diseño que
   pone la plantilla y `div.payment_box` cubre cualquier caja que imprima un
   gateway por su cuenta (PayPal arma la suya). Los dos suman (1,3,2) y le ganan
   a `.woocommerce-checkout #payment div.payment_box`, que es (1,2,1). */
body.ifha-pagos .ifha-p #payment div.ifha-p-pago,
body.ifha-pagos .ifha-p #payment div.payment_box {
	position: static;
	width: auto;
	margin: 0;
	padding: var(--ifha-space-4);
	border: 0;
	border-radius: var(--ifha-radius-sm);
	background: var(--ifha-surface-100);
	color: var(--ifha-ink);
	font-size: 14px;
	line-height: 1.5;
}

/* El triangulito que WooCommerce dibuja apuntando a la radio elegida. */
body.ifha-pagos .ifha-p #payment div.payment_box::before {
	content: none;
	display: none;
	border: 0;
}

/* Los gateways imprimen parrafos con margen propio: el primero y el ultimo se
   sacan para que el aire lo ponga el padding de la caja. */
body.ifha-pagos .ifha-p #payment div.payment_box p:first-child {
	margin-top: 0;
}

body.ifha-pagos .ifha-p #payment div.payment_box p:last-child {
	margin-bottom: 0;
}

body.ifha-pagos .ifha-p #payment #place_order {
	float: none;
}

body.ifha-pagos .ifha-p #payment .wc_payment_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* -----------------------------------------------------------------------------
 * 27b. El formulario de tarjeta de Payway
 *
 * QUE ES: el marcado lo imprime su plugin
 * (`wc-gateway-payway/template/html-payway-checkout-form.php`) y no se puede
 * tocar: sus propios scripts buscan esos ids y esas clases. Lo unico que se
 * puede hacer es vestirlo desde aca.
 *
 * DOS COSAS. La primera, que se vea como el resto del centro de pagos: sus
 * campos salen con el estilo por defecto de WooCommerce, al lado de los
 * nuestros, en la misma tarjeta. La segunda, que en escritorio no sea una
 * columna de doce campos: son doce filas, una abajo de la otra, y el bloque
 * quedaba larguisimo. En una grilla de seis columnas entra en la mitad de alto
 * sin apretar nada.
 *
 * POR QUE `nth-child` Y NO CLASES: sus `div.form-row` no tienen ninguna clase
 * que los distinga; el unico dato estable es el ORDEN de su plantilla, que es
 * fijo: 1 banco, 2 tarjeta, 3 cuotas, 4 numero, 5 mes, 6 anio, 7 CVV, 8
 * titular, 9 tipo de documento, 10 documento, 11 direccion, 12 altura. Si
 * manana cambian ese orden, lo que pasa es que los anchos quedan distintos: la
 * regla base los deja a media columna y no se rompe nada.
 * -------------------------------------------------------------------------- */

body.ifha-pagos .ifha-p #payment fieldset.wc-gateway-payway {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Su descripcion y sus dos rayas grises: la tarjeta de arriba ya explica el
   medio, y decirlo dos veces en la misma pantalla es peor que no decirlo. */
body.ifha-pagos .ifha-p #payment fieldset.wc-gateway-payway > hr,
body.ifha-pagos .ifha-p #payment fieldset.wc-gateway-payway .fieldset-description {
	display: none;
}

body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row {
	margin: 0;
	padding: 0;
}

/* Rotulos con la forma de `.ifha-p-label`. */
body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row > label {
	display: block;
	margin: 0 0 6px;
	font-family: var(--ifha-font);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ifha-gray-600);
}

body.ifha-pagos .ifha-p #payment .fields-wrapper .required {
	color: var(--ifha-red-500);
	text-decoration: none;
	border: 0;
}

/* Campos con la forma de `.ifha-p-input` y `.ifha-p-select`. */
body.ifha-pagos .ifha-p #payment .fields-wrapper input.input-text,
body.ifha-pagos .ifha-p #payment .fields-wrapper select {
	box-sizing: border-box;
	width: 100%;
	/* El tema le pone `max-width: 300px` a los campos de texto: sin esto,
	   el numero de tarjeta y el titular quedaban a un tercio de su celda. */
	max-width: 100%;
	min-height: var(--ifha-hit);
	margin: 0;
	padding: 11px 14px;
	border: 1px solid var(--ifha-line-300);
	border-radius: var(--ifha-radius-sm);
	background: var(--ifha-white);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	color: var(--ifha-ink);
	transition: var(--ifha-transition);
}

body.ifha-pagos .ifha-p #payment .fields-wrapper select {
	padding: 10px 14px;
}

/* 16 px en celular, por lo mismo que el resto de los campos: por debajo de
   16, Safari en iOS hace zoom solo al tocar cualquiera. Va aca y no en el
   bloque de arriba porque estas reglas son posteriores en el archivo y le
   ganarian por orden. */
@media (max-width: 599px) {

	body.ifha-pagos .ifha-p #payment .fields-wrapper input.input-text,
	body.ifha-pagos .ifha-p #payment .fields-wrapper select {
		font-size: 16px;
	}
}

body.ifha-pagos .ifha-p #payment .fields-wrapper input.input-text:hover,
body.ifha-pagos .ifha-p #payment .fields-wrapper select:hover {
	border-color: var(--ifha-gray-400);
}

body.ifha-pagos .ifha-p #payment .fields-wrapper input.input-text:focus,
body.ifha-pagos .ifha-p #payment .fields-wrapper select:focus {
	border-color: var(--ifha-blue-600);
}

/* El rojo del campo que su validador marca (y que el nuestro le saca al
   escribir). Antes no se veia: la clase la pone en la fila, no en el campo. */
body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row.woocommerce-invalid input.input-text,
body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row.woocommerce-invalid select {
	border-color: var(--ifha-red-500);
}

/* Su contenedor de errores, con el aire y el color de los nuestros. */
body.ifha-pagos .ifha-p #payment #error_container:not(:empty) {
	margin: 0 0 var(--ifha-space-4);
	font-size: 13px;
	line-height: 1.4;
	color: var(--ifha-red-500);
}

body.ifha-pagos .ifha-p #payment .fields-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ifha-space-4);
}

@media (min-width: 720px) {

	body.ifha-pagos .ifha-p #payment .fields-wrapper {
		grid-template-columns: repeat(6, 1fr);
	}

	/* Base: media fila. Si su plantilla cambia, esto es lo que queda. */
	body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row {
		grid-column: span 3;
	}

	/* 3 cuotas y 4 numero de tarjeta: fila entera. */
	body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row:nth-child(3),
	body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row:nth-child(4) {
		grid-column: span 6;
	}

	/* 5 mes, 6 anio y 7 CVV: los tres en una fila. */
	body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row:nth-child(5),
	body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row:nth-child(6),
	body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row:nth-child(7) {
		grid-column: span 2;
	}

	/* 8 titular: fila entera (los nombres largos no entran en media). */
	body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row:nth-child(8) {
		grid-column: span 6;
	}

	/* 9 tipo de documento (angosto) y 10 numero de documento. */
	body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row:nth-child(9) {
		grid-column: span 2;
	}

	body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row:nth-child(10) {
		grid-column: span 4;
	}

	/* 11 direccion (ancha) y 12 altura (angosta), como en cualquier domicilio. */
	body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row:nth-child(11) {
		grid-column: span 4;
	}

	body.ifha-pagos .ifha-p #payment .fields-wrapper .form-row:nth-child(12) {
		grid-column: span 2;
	}

	/* Los ocultos del token no ocupan celda. */
	body.ifha-pagos .ifha-p #payment .fields-wrapper > input[type="hidden"] {
		display: none;
	}
}

/* El bloque de domicilio que agrega el plugin va DESPUES del formulario de
   Payway y es otra cosa: se separa con una linea, como en la caja del
   pedido en el escritorio. */
body.ifha-pagos .ifha-p #payment [data-ifha-pw-domicilio] {
	margin-top: var(--ifha-space-5);
	padding-top: var(--ifha-space-4);
	border-top: 1px solid var(--ifha-line-200);
}

/* woocommerce.css centra los parrafos dentro de `div.payment_box`. Nuestra
   ayuda se lee al pie de un campo: va alineada con el campo. */
body.ifha-pagos .ifha-p #payment div.payment_box .ifha-p-help,
body.ifha-pagos .ifha-p #payment div.payment_box .ifha-p-error,
body.ifha-pagos .ifha-p #payment div.payment_box .ifha-p-hint {
	text-align: left;
}


/*
 * Ganchos de pagina.
 *
 * No pintan nada: existen para que el CSS y el JS puedan apuntar a una pantalla
 * concreta sin depender de la URL. `.ifha-p--gracias` la lleva el contenedor de
 * templates/checkout/thankyou.php (instrucciones y resultado); si algun dia hay
 * que separar un estilo de esa pantalla del de los pasos 1 y 2, el gancho ya
 * esta puesto y no hay que tocar el marcado.
 */
.ifha-p.ifha-p--gracias {
	/* Sin reglas a proposito. */
}

/* -----------------------------------------------------------------------------
 * 23. Esquema de pago del paso 1 (0.9.0)
 *
 * Reemplaza la lista de radio-cards de tipo de abono en la Carrera y el
 * Intensivo. Jerarquia: el numero grande es "USD 349 por mes" (nunca el
 * total), despues las filas del esquema alineadas (concepto a la izquierda,
 * importe a la derecha, total al pie), una frase, un beneficio por linea y
 * la eleccion de que se paga hoy. Entra en 360 px sin partir importes:
 * `white-space: nowrap` en todo lo que es plata y `min-width: 0` en el texto.
 * -------------------------------------------------------------------------- */

.ifha-p .ifha-p-esq {
	display: grid;
	gap: var(--ifha-space-3);
	padding: var(--ifha-space-4) 18px;
	border: 1.5px solid var(--ifha-line-300);
	border-radius: var(--ifha-radius-md);
	background: var(--ifha-white);
}

.ifha-p .ifha-p-esq__hero {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
}

.ifha-p .ifha-p-esq__usd {
	font-size: 34px;
	font-weight: 900;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--ifha-blue-900);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.ifha-p .ifha-p-esq__sufijo {
	font-size: 16px;
	font-weight: 500;
	color: var(--ifha-ink);
}

.ifha-p .ifha-p-esq__ars {
	flex-basis: 100%;
	font-size: 13px;
	color: var(--ifha-gray-600);
}

.ifha-p .ifha-p-esq__filas {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ifha-p .ifha-p-esq__fila {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ifha-space-3);
	padding: 9px 0;
	border-top: 1px solid var(--ifha-line-200);
}

.ifha-p .ifha-p-esq__k {
	min-width: 0;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ifha-ink);
}

.ifha-p .ifha-p-esq__k small {
	display: block;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--ifha-gray-600);
}

.ifha-p .ifha-p-esq__v {
	flex: none;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--ifha-blue-900);
}

.ifha-p .ifha-p-esq__fila--total .ifha-p-esq__k,
.ifha-p .ifha-p-esq__fila--total .ifha-p-esq__v {
	font-size: 13px;
	font-weight: 500;
	color: var(--ifha-gray-600);
}

.ifha-p .ifha-p-esq__nota {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ifha-gray-600);
}

.ifha-p .ifha-p-esq__vigente {
	margin: 0;
	padding: 8px 10px;
	border-left: 3px solid var(--ifha-green-600);
	background: var(--ifha-green-50);
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--ifha-green-900);
}

.ifha-p .ifha-p-esq__vigente--vencida {
	border-left-color: var(--ifha-amber-500);
	background: #FDF1D8;
	color: #7A5108;
}

.ifha-p .ifha-p-esq__benef {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ifha-p .ifha-p-esq__benef li {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	font-size: 14px;
	line-height: 1.45;
}

.ifha-p .ifha-p-esq__benef li::before {
	content: "\2713";
	flex: none;
	font-weight: 900;
	color: var(--ifha-green-600);
}

.ifha-p .ifha-p-esq__hoy {
	display: grid;
	gap: var(--ifha-space-2);
	padding-top: var(--ifha-space-2);
	border-top: 1px solid var(--ifha-line-200);
}

.ifha-p .ifha-p-esq__medios {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--ifha-gray-600);
}

@media (max-width: 480px) {
	.ifha-p .ifha-p-esq {
		padding: 14px;
	}
	.ifha-p .ifha-p-esq__usd {
		font-size: 30px;
	}
	.ifha-p .ifha-p-esq__k {
		font-size: 14px;
	}
}

/* 24. Paso 1 (0.10.0): lineas de valor arriba del precio y precio de entrada
   en la tarjeta de programa. */
.ifha-p-esq__valor{list-style:none;margin:0 0 16px;padding:0 0 14px;border-bottom:1px solid var(--ifha-line,#E2E7EC);display:grid;gap:7px;font-size:14px;line-height:1.5;color:var(--ifha-ink-2,#5A6470)}
.ifha-p-esq__valor li{display:flex;gap:9px;align-items:flex-start}
.ifha-p-esq__valor li::before{content:"\2713";flex:none;font-weight:700;color:var(--ifha-green-600,#6EA837)}
.ifha-p-radio__entrada{display:block;margin-top:4px;font-weight:600;color:var(--ifha-blue-600,#245CA9)}

/* 25. El contexto del bloque de pago vive en dos lados (0.12.1).
   En el telefono, dentro de la columna, como siempre. Desde 900 px se oculta
   aca y se muestra la copia que el JS clona al panel lateral: la columna deja
   de abrir con nueve lineas de texto antes de que se pueda decidir nada.
   El <aside> ya esta en display:none por debajo de 900 px, asi que la copia
   del panel no necesita regla propia para el telefono. */
@media (min-width: 900px) {
	.ifha-p .ifha-p-esq__ctx {
		display: none;
	}
}

.ifha-p .ifha-p-aside__ctx:empty {
	display: none;
}

.ifha-p .ifha-p-aside__ctx {
	display: grid;
	gap: 14px;
	padding-top: 16px;
	border-top: 1px solid var(--ifha-line-300);
}

/* En el panel las listas no separan del precio: no hay precio arriba. */
.ifha-p .ifha-p-aside__ctx .ifha-p-esq__valor {
	margin: 0;
	padding: 0;
	border-bottom: none;
	font-size: 13.5px;
}

.ifha-p .ifha-p-aside__ctx .ifha-p-esq__benef {
	margin: 0;
	font-size: 13.5px;
}

.ifha-p .ifha-p-aside__ctx .ifha-p-esq__medios {
	font-size: 12px;
}
.ifha-p-ayuda{text-align:center;margin:12px 0 0}
.ifha-p-ayuda a{color:var(--ifha-blue-600,#245CA9);font-weight:600;text-decoration:underline}

/* -----------------------------------------------------------------------------
 * 28. Auditoría de diseño del 25-sep-2026 (0.32.8)
 *
 * Todo lo de esta sección sale del informe de la auditoría (ids BL-*). Va al
 * final a propósito: pisa por orden, sin subir la especificidad, y se puede
 * leer (o sacar) de una sola vez.
 * -------------------------------------------------------------------------- */

/* BL-105 · tokens. El gris de texto secundario (#9AA7B2, 2,46:1 sobre blanco)
   pasa al --ifha-muted del sistema (#5A6470, 6,01:1; como borde de los radios
   pasa 3:1) y el rojo de error a #B42318 (6,57:1). */
.ifha-p {
	--ifha-gray-400: #5A6470;
	--ifha-red-500: #B42318;
	--ifha-campo-borde: #7D8793;
}

/* BL-037 · una sola especificación de campo (patrón del Webinar): letra de
   16 px (iOS deja de hacer zoom al enfocar), 48 px de alto, borde que se ve
   (#7D8793, 3,65:1 sobre blanco) y anillo de foco. */
.ifha-p .ifha-p-input,
.ifha-p .ifha-p-select {
	min-height: 48px;
	font-size: 16px;
	line-height: 1.35;
	border-color: var(--ifha-campo-borde);
}

.ifha-p .ifha-p-input {
	padding: 12px 14px;
}

.ifha-p .ifha-p-input:focus,
.ifha-p .ifha-p-select:focus,
.ifha-p .ifha-p-input:focus-visible,
.ifha-p .ifha-p-select:focus-visible {
	border-color: var(--ifha-blue-600);
	box-shadow: 0 0 0 3px rgba(36, 92, 169, .28);
	outline: none;
}

/* El error se vuelve a declarar DESPUÉS del borde nuevo: con la misma
   especificidad, el orden manda. */
.ifha-p .ifha-p-input[aria-invalid="true"],
.ifha-p .ifha-p-select[aria-invalid="true"],
.ifha-p .ifha-p-input.is-error,
.ifha-p .ifha-p-select.is-error {
	border-color: var(--ifha-red-500);
}

/* BL-105 · en celular no hay cajas dentro de cajas: el panel blanco de Astra
   se va y queda la tarjeta del plugin sobre el gris de la página. La meta de
   las páginas no se toca. */
body.ifha-pagos.ast-separate-container .ast-article-single {
	background: transparent;
	padding: 0;
	box-shadow: none;
}

/* BL-105 · las ayudas de campo y de sección: pegadas a lo que explican,
   alineadas a la izquierda y en 13 px (antes heredaban el margen de 28 px
   centrado del pie de ayuda). */
.ifha-p .ifha-p-campo .ifha-p-help,
.ifha-p .ifha-p-seccion > .ifha-p-help {
	margin: 6px 0 0;
	text-align: left;
	font-size: 13px;
}

/* BL-105 · el radio arriba, no centrado en tarjetas de 4 a 7 renglones. */
.ifha-p .ifha-p-radio {
	align-items: flex-start;
}

/* BL-105 · a menos de 480 px el segmentado ocupa el ancho en dos columnas
   iguales y el texto puede partirse: «Ya soy alumno» salía 31 px fuera de su
   tarjeta a 360 y /pagos/ medía 350 px de ancho a 320. */
@media (max-width: 479px) {

	.ifha-p .ifha-p-seg {
		display: grid;
		grid-template-columns: 1fr 1fr;
		width: 100%;
	}

	.ifha-p .ifha-p-seg__btn {
		min-width: 0;
		padding: 10px 12px;
		white-space: normal;
	}

	/* En la tarjeta-fila el segmentado baja a su propia línea, entero. (No se
	   usa flex-direction:column: el flex-basis de 200 px del texto pasaría a
	   ser un alto.) */
	.ifha-p .ifha-p-card--fila .ifha-p-seg {
		flex: 1 1 100%;
	}
}

/* BL-105 · en el celular el primario va arriba: «Continuar al pago» y
   «Pagar» primero, «Volver» debajo. */
@media (max-width: 599px) {

	.ifha-p .ifha-p-actions {
		flex-direction: column-reverse;
	}
}

/* BL-007 · el enlace a la política dentro de la ayuda de datos. */
.ifha-p .ifha-p-help--datos a,
.ifha-p .ifha-p-fineprint a {
	color: var(--ifha-blue-600);
	text-decoration: underline;
}

.ifha-p .ifha-p-fineprint--acepta {
	text-align: right;
}

/* BL-028 · la lista de «Cómo funciona» de la Bolsa. Usaba .ifha-p-copy, que es
   el botón de copiar, y los tres pasos quedaban invisibles. (No se llama
   .ifha-p-pasos: ése es el indicador de progreso.) */
.ifha-p .ifha-p-lista-pasos {
	display: grid;
	gap: 8px;
	margin: 0;
	padding-left: 1.25em;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ifha-ink);
}

#ifha-bolsa-app {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

#ifha-bolsa-app .ifha-p-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

/* BL-103 · modo embudo (D-16 A). Mientras alguien paga, el header queda en el
   logo y el WhatsApp, y el pie en el contacto y la fila legal: sin la barra de
   promociones que rota, sin los tres desplegables con los programas, sin el
   «Inscribirme →» (en /inscripcion/ recargaba la misma página y perdía el
   ?programa=) y sin la captura de PDF ni la venta cruzada del pie.
   `.ifha-hdr-spacer` no necesita regla: medirSpacer() del header lo mide del
   DOM con el header ya sin topbar. */
body.ifha-pagos .ifha-header .ifha-topbar,
body.ifha-pagos .ifha-header .ifha-nav,
body.ifha-pagos .ifha-header .ifha-cta,
body.ifha-pagos .ifha-header .ifha-burger,
body.ifha-pagos .ifha-drawer,
body.ifha-pagos .ifha-f .ifha-f__pdf,
body.ifha-pagos .elementor-element-ifhaft03,
body.ifha-pagos .ifha-f .ifha-f__social,
body.ifha-pagos .ifha-f .ifha-f__cols > .ifha-f__grp,
body.ifha-pagos .ifha-f .ifha-f__grpcol,
body.ifha-pagos .ifha-f .ifha-f__btn3,
body.ifha-pagos .ifha-f .ifha-f__credlink {
	display: none !important;
}

/* BL-105 · el rótulo «Edición» ahora es un <label for> (antes <p>). */
.ifha-p label.ifha-p-kicker {
	display: block;
}

/* BL-103 · lo que queda del header: el WhatsApp a la derecha, también en el
   celular (el header lo esconde por debajo de 1200 px y ahí quedaba sólo el
   logo). */
body.ifha-pagos .ifha-header .ifha-actions {
	margin-left: auto;
}

body.ifha-pagos .ifha-header .ifha-icon-btn {
	display: grid !important;
}

/* -----------------------------------------------------------------------------
 * 29. Auditoría de diseño, ola 2 (0.33.2, 25-sep-2026)
 * -------------------------------------------------------------------------- */

/* Enlace-botón de texto (44 px de alto para el dedo): «Cambiar», «Elegir otra
   fecha», «¿Tenés un código…?» y «← Volver al paso N» (BL-105). */
.ifha-p .ifha-p-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--ifha-blue-600);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.ifha-p .ifha-p-link:focus-visible {
	outline: 2px solid var(--ifha-blue-600);
	outline-offset: 2px;
	border-radius: 4px;
}

.ifha-p .ifha-p-link[hidden] {
	display: none;
}

/* Primario arriba y a lo ancho; «Volver» como enlace centrado debajo. */
.ifha-p .ifha-p-actions--pila,
.ifha-p .ifha-p-cta .ifha-p-actions--pila {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 4px;
}

.ifha-p .ifha-p-actions--pila .ifha-p-btn {
	width: 100%;
}

.ifha-p .ifha-p-actions--pila .ifha-p-link--volver {
	align-self: center;
}

@media (min-width: 600px) {
	.ifha-p .ifha-p-actions--pila .ifha-p-btn {
		width: auto;
		align-self: flex-end;
	}
	.ifha-p .ifha-p-actions--pila .ifha-p-link--volver {
		align-self: flex-end;
	}
}

/* BL-104 · programa y fecha ya elegidos: una fila con «Cambiar». */
.ifha-p .ifha-p-fijo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 12px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--ifha-blue-600);
	border-radius: var(--ifha-radius-sm);
	background: var(--ifha-blue-50, #F0F5FC);
}

.ifha-p .ifha-p-fijo[hidden] {
	display: none;
}

.ifha-p .ifha-p-fijo__t {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--ifha-ink, #2A2E34);
}

.ifha-p .ifha-p-fijo__t strong {
	font-weight: 700;
	color: var(--ifha-navy, #22395A);
}

.ifha-p .ifha-p-fijo__t span {
	font-size: 14px;
	color: var(--ifha-gray-600, #5A6470);
}

.ifha-p .ifha-p-fijo--texto {
	border-color: var(--ifha-line-300, #D4D9DE);
	background: var(--ifha-surface-50, #F7F8FA);
}

.ifha-p .ifha-p-help--aviso {
	margin: 0 0 8px;
	padding: 8px 12px;
	border-left: 3px solid var(--ifha-blue-600);
	background: var(--ifha-blue-50, #F0F5FC);
	color: var(--ifha-navy, #22395A);
	font-size: 14px;
	text-align: left;
}

/* C9-02 · la tercera línea de la opción (total y equivalente en pesos). */
.ifha-p .ifha-p-radio__extra {
	margin-top: 2px;
	font-size: 13px;
}

/* Precio a la vista cuando hay una sola forma de pago. */
.ifha-p .ifha-p-esq--solo {
	padding: 12px 14px;
}

/* «Qué incluye y cómo se paga» / «Ver el detalle del pago»: plegados. */
.ifha-p .ifha-p-mas {
	margin: 0;
	border: 1px solid var(--ifha-line-300, #D4D9DE);
	border-radius: var(--ifha-radius-sm);
	background: var(--ifha-white, #fff);
}

.ifha-p .ifha-p-mas > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	padding: 0 14px;
	color: var(--ifha-navy, #22395A);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.ifha-p .ifha-p-mas > summary::-webkit-details-marker {
	display: none;
}

.ifha-p .ifha-p-mas > summary::after {
	content: '+';
	flex: none;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
}

.ifha-p .ifha-p-mas[open] > summary::after {
	content: '\2212';
}

.ifha-p .ifha-p-mas > summary:focus-visible {
	outline: 2px solid var(--ifha-blue-600);
	outline-offset: 2px;
}

.ifha-p .ifha-p-mas > :not(summary) {
	margin: 0 14px 14px;
}

.ifha-p .ifha-p-mas .ifha-p-esq {
	margin: 0 14px 14px;
	border: 0;
	padding: 0;
}

.ifha-p .ifha-p-mas--resumen {
	border: 0;
	background: transparent;
}

.ifha-p .ifha-p-mas--resumen > summary {
	padding: 0;
	font-size: 14px;
}

.ifha-p .ifha-p-mas--resumen > :not(summary) {
	margin: 0 0 12px;
}

/* En escritorio el contexto del esquema está en el panel de al lado: el
   plegable sólo trae las filas del plan. */

/* C9-03 · la letra chica que sigue al botón del paso 2. */
.ifha-p .ifha-p-fineprint--sigue {
	margin: 0;
	text-align: left;
}

/* GAP1-06 · qué se paga y cuánto, arriba de todo en order-pay. */
.ifha-p .ifha-p-mini {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
	margin: 0 0 16px;
	padding: 12px 16px;
	border: 1px solid var(--ifha-line-300, #D4D9DE);
	border-radius: var(--ifha-radius-sm);
	background: var(--ifha-white, #fff);
}

.ifha-p .ifha-p-mini__t {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ifha-navy, #22395A);
}

.ifha-p .ifha-p-mini__v {
	font-size: 22px;
	font-weight: 900;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--ifha-navy, #22395A);
}

/* GAP1-05 · el total no se parte («ARS / 534.900») a 360 px. */
.ifha-p .ifha-p-resumen__total-k,
.ifha-p .ifha-p-resumen__total-v,
.ifha-p .ifha-p-datos__total .ifha-p-datos__v {
	white-space: nowrap;
}

@media (max-width: 400px) {
	body.ifha-pagos.ast-plain-container .site-content > .ast-container {
		padding-left: 0;
		padding-right: 0;
	}
	.ifha-p .ifha-p-resumen__total-v {
		font-size: 22px;
	}
}

/* GAP1-04 / GAP1-02 · los campos propios dentro de .woocommerce (order-pay y
   gracias) y los de Payway recuperan el borde y el anillo de foco. */
body.ifha-pagos .ifha-p .ifha-p-input {
	border: 1px solid var(--ifha-campo-borde, #7D8793);
	border-radius: var(--ifha-radius-sm);
	box-shadow: none;
}

body.ifha-pagos .ifha-p .ifha-p-input:focus-visible,
body.ifha-pagos .ifha-p .ifha-p-select:focus-visible,
body.ifha-pagos .ifha-p #payment .fields-wrapper input.input-text:focus-visible,
body.ifha-pagos .ifha-p #payment .fields-wrapper select:focus-visible {
	outline: 2px solid var(--ifha-blue-600);
	outline-offset: 2px;
	border-color: var(--ifha-blue-600);
	box-shadow: 0 0 0 3px rgba(36, 92, 169, .28);
}

/* GAP1-03 · el domicilio del plugin dentro del formulario de Payway. */
.ifha-p .ifha-p-pw-dom--dentro {
	margin-top: 8px;
}

/* GAP1-09 · con la tarjeta del rechazo a la vista, la bajada «Confirmá que
   todo esté bien antes de continuar» sobra. */
.ifha-p .ifha-p-flow:has(.ifha-p-res--rechazado:not([hidden])) > .ifha-p-hero .ifha-p-lead {
	display: none;
}

/* GAP1-07 · sin archivo, adjuntar es la acción principal. */
.ifha-p .ifha-p-proof__file--primario {
	border: 0;
	background: var(--ifha-green-500);
	color: var(--ifha-green-900);
	font-size: 16px;
	font-weight: 700;
	min-height: 56px;
}

.ifha-p .ifha-p-proof__file--primario:hover {
	background: var(--ifha-green-600);
	color: var(--ifha-white);
}

/* GAP1-07 · «Copiar» en cada dato de la transferencia. */
.ifha-p .ifha-p-copy--fila {
	display: inline-flex;
	margin: 6px 0 0 8px;
	min-height: 36px;
	vertical-align: middle;
}

/* GAP1-07 · en el celular, el principal arriba también en gracias y en el
   comprobante. */
@media (max-width: 599px) {
	body.ifha-pagos .ifha-p-proof .ifha-p-actions {
		flex-direction: column-reverse;
	}
	/* En las tarjetas de resultado y en el enlace vencido el principal ya va
	   primero en el HTML: la regla de BL-105 (column-reverse) lo mandaba abajo. */
	.ifha-p .ifha-p-res .ifha-p-actions,
	.ifha-p .ifha-p-actions--primero {
		flex-direction: column;
	}
}

/* C9-07 · modo embudo más corto: del pie quedan Términos y Privacidad. */
body.ifha-pagos .ifha-f .ifha-f__cred,
body.ifha-pagos .ifha-f .ifha-f__seo,
body.ifha-pagos .ifha-f .ifha-f__dmca,
body.ifha-pagos .ifha-f .ifha-f__credito,
body.ifha-pagos .ifha-f .ifha-f__afil,
body.ifha-pagos .ifha-f .ifha-f__contin,
body.ifha-pagos .ifha-f .ifha-f__leg[href*="politica-de-cookies"],
body.ifha-pagos .ifha-f .ifha-f__leg[href$="/pagos/"] {
	display: none !important;
}

.ifha-p .ifha-p-total-movil__v {
	white-space: nowrap;
}

.ifha-p .ifha-p-radio__entrada[hidden] {
	display: none;
}

/* =============================================================================
 * 1.1.0 · /inscripcion/ como un checkout de primera (pedido de Lucas, 27-sep-2026)
 *
 * Cinco piezas, todas de presentación (la lógica de pagos no se toca):
 *   1. Indicador compacto en el celular: el paso actual se lee entero, los
 *      otros quedan en su pastilla (número o ✓) y la barra es UNA línea.
 *   2. El paso terminado se festeja: ✓ verde que «salta» y barra que avanza.
 *   3. Línea de logro que cambia con el paso.
 *   4. Barra de acción pegada al pie en el celular: resumen plegable + el
 *      único botón principal, al alcance del pulgar. Con el teclado abierto
 *      deja de flotar (.is-tecleando) para no tapar el campo.
 *   5. Sellos de confianza en contexto, uno o dos por paso.
 * ========================================================================== */

.ifha-p .ifha-p-vh {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ── 2. El ✓ del paso terminado: verde con contraste (el 500 con blanco no
   llega a 3:1) y un salto corto al completarse. ── */
.ifha-p .ifha-p-pasos--compacto .ifha-p-pasos__item--hecho .ifha-p-pasos__glifo {
	background: var(--ifha-green-700);
	font-size: 12px;
}

.ifha-p .ifha-p-pasos--compacto .ifha-p-pasos__item--hecho .ifha-p-pasos__label {
	color: var(--ifha-green-800);
}

@keyframes ifha-p-salto {
	0% { transform: scale(.35); }
	55% { transform: scale(1.22); }
	100% { transform: scale(1); }
}

@keyframes ifha-p-brillo {
	0% { box-shadow: 0 0 0 0 rgba(91, 140, 45, .45); }
	100% { box-shadow: 0 0 0 10px rgba(91, 140, 45, 0); }
}

.ifha-p .ifha-p-pasos__item.is-recien .ifha-p-pasos__glifo {
	animation: ifha-p-salto .42s cubic-bezier(.3, 1.4, .5, 1) both, ifha-p-brillo .7s ease-out .15s both;
}

/* ── 1. Compacto en el celular ── */
@media (max-width: 599px) {
	.ifha-p .ifha-p-pasos--compacto {
		position: relative;
		align-items: center;
		gap: 6px;
		margin-bottom: var(--ifha-space-5);
		padding-top: 18px;
	}

	.ifha-p .ifha-p-pasos--compacto .ifha-p-pasos__item {
		position: static;
		flex: 0 0 auto;
	}

	/* El actual no se estira: las pastillas quedan juntas, de corrido, y no
	   se abre un hueco entre lo hecho y lo que falta. */
	.ifha-p .ifha-p-pasos--compacto .ifha-p-pasos__item--actual {
		flex: 0 1 auto;
		min-width: 0;
		margin-right: 4px;
	}

	/* Las cuatro vías forman UNA barra: segmentos iguales a lo ancho de la
	   lista, anclados a la <ol> (el <li> queda estático a propósito). */
	/* 1.1.1: sirve para 3 o 4 pasos. `--n` (cantidad) va en la <ol> y `--i`
	   (posición desde 0) en cada <li>; sin ellos vale 4, como en /inscripcion/. */
	.ifha-p .ifha-p-pasos--compacto .ifha-p-pasos__barra {
		--ifha-seg: calc((100% - (var(--n, 4) - 1) * 4px) / var(--n, 4));
		position: absolute;
		top: 0;
		left: calc(var(--i, 0) * (var(--ifha-seg) + 4px));
		width: var(--ifha-seg);
		height: 6px;
	}

	.ifha-p .ifha-p-pasos--compacto .ifha-p-pasos__item:nth-child(2) { --i: 1; }
	.ifha-p .ifha-p-pasos--compacto .ifha-p-pasos__item:nth-child(3) { --i: 2; }
	.ifha-p .ifha-p-pasos--compacto .ifha-p-pasos__item:nth-child(4) { --i: 3; }

	/* Sin `overflow: hidden`: recortaba el halo del paso actual en un
	   cuadrado. El rótulo ya no se corta, así que no hace falta. */
	.ifha-p .ifha-p-pasos--compacto .ifha-p-pasos__label {
		gap: 8px;
		overflow: visible;
		font-size: 12px;
		letter-spacing: .06em;
	}

	.ifha-p .ifha-p-pasos--compacto .ifha-p-pasos__glifo {
		width: 24px;
		height: 24px;
		font-size: 11px;
	}

	/* Los que no son el actual: sólo la pastilla (el rótulo queda para el
	   lector de pantalla). */
	.ifha-p .ifha-p-pasos--compacto .ifha-p-pasos__item:not(.ifha-p-pasos__item--actual) .ifha-p-pasos__texto {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.ifha-p .ifha-p-pasos--compacto .ifha-p-pasos__item--actual .ifha-p-pasos__texto {
		overflow: visible;
		text-overflow: clip;
	}

	.ifha-p .ifha-p-pasos--compacto .ifha-p-pasos__item--actual .ifha-p-pasos__glifo {
		box-shadow: 0 0 0 4px rgba(36, 92, 169, .13);
	}
}

/* ── 3. Línea de logro ── */
.ifha-p .ifha-p-logro {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 14px;
	border-radius: 12px;
	background: var(--ifha-green-50);
	color: var(--ifha-green-900);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.4;
}

.ifha-p .ifha-p-logro[hidden] {
	display: none;
}

.ifha-p .ifha-p-logro__ico {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--ifha-green-700);
	color: var(--ifha-white);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

@keyframes ifha-p-entra {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

.ifha-p .ifha-p-logro.is-entrando {
	animation: ifha-p-entra .32s var(--ifha-ease-out) both;
}

.ifha-p .ifha-p-logro.is-entrando .ifha-p-logro__ico {
	animation: ifha-p-salto .42s cubic-bezier(.3, 1.4, .5, 1) .08s both;
}

/* ── 4. Barra de acción ── */
.ifha-p .ifha-p-volver-fila {
	display: flex;
	justify-content: center;
	margin-top: -16px;
}

.ifha-p .ifha-p-dock__res[hidden] {
	display: none;
}

@media (max-width: 899px) {
	.ifha-p .ifha-p-dock {
		position: -webkit-sticky;
		position: sticky;
		bottom: 0;
		z-index: 30;
		display: flex;
		flex-direction: column;
		gap: 10px;
		margin: 0 -20px;
		padding: 10px 20px calc(12px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid transparent;
		background: rgba(255, 255, 255, .97);
		transition: box-shadow var(--ifha-dur-base) var(--ifha-ease-out), border-color var(--ifha-dur-base) var(--ifha-ease-out);
	}

	.ifha-p .ifha-p-dock.is-flotando {
		border-top-color: var(--ifha-line-200);
		box-shadow: 0 -10px 28px rgba(20, 52, 95, .10);
	}

	/* Teclado abierto: la barra vuelve a su lugar y no tapa el campo ni el
	   teclado. No sale del flujo en ningún caso, así que nada salta. */
	.ifha-p.is-tecleando .ifha-p-dock {
		position: relative;
		box-shadow: none;
		border-top-color: transparent;
	}

	.ifha-p .ifha-p-dock .ifha-p-btn--primary {
		width: 100%;
		min-height: 54px;
		font-size: 16.5px;
	}

	/* Lo que recibe el foco no queda debajo de la barra. */
	.ifha-p [data-ifha-ins-campo],
	.ifha-p [data-ifha-ins-error] {
		scroll-margin-bottom: 180px;
	}

	.ifha-p .ifha-p-dock__res {
		border: 1px solid var(--ifha-line-300);
		border-radius: 12px;
		background: var(--ifha-white);
	}

	/* Dos renglones: el programa entero arriba; abajo, el inicio y lo que
	   se paga hoy. A 360 px una sola línea cortaba las dos cosas. */
	.ifha-p .ifha-p-dock__sum {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
		grid-template-areas: "prog prog chev" "meta v chev";
		align-items: center;
		column-gap: 10px;
		row-gap: 1px;
		min-height: 48px;
		padding: 7px 12px 7px 14px;
		cursor: pointer;
		list-style: none;
	}

	.ifha-p .ifha-p-dock__sum::-webkit-details-marker {
		display: none;
	}

	.ifha-p .ifha-p-dock__sum:focus-visible {
		outline: 2px solid var(--ifha-focus);
		outline-offset: 2px;
		border-radius: 12px;
	}

	.ifha-p .ifha-p-dock__t {
		display: contents;
	}

	.ifha-p .ifha-p-dock__t strong {
		grid-area: prog;
		overflow: hidden;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.3;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: var(--ifha-blue-900);
	}

	.ifha-p .ifha-p-dock__t small {
		grid-area: meta;
		overflow: hidden;
		font-size: 12.5px;
		line-height: 1.3;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: var(--ifha-gray-600);
	}

	.ifha-p .ifha-p-dock__v {
		grid-area: v;
		font-size: 15px;
		font-weight: 900;
		line-height: 1.3;
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
		color: var(--ifha-ink);
	}

	.ifha-p .ifha-p-dock__chev {
		grid-area: chev;
		width: 9px;
		height: 9px;
		margin: 4px 2px 0;
		border-right: 2px solid var(--ifha-gray-600);
		border-bottom: 2px solid var(--ifha-gray-600);
		transform: rotate(-135deg);
		transition: transform var(--ifha-dur-base) var(--ifha-ease-out);
	}

	.ifha-p .ifha-p-dock__res[open] .ifha-p-dock__chev {
		margin-top: -4px;
		transform: rotate(45deg);
	}

	.ifha-p .ifha-p-dock__filas {
		max-height: 42vh;
		overflow: auto;
		padding: 2px 14px 10px;
		border-top: 1px solid var(--ifha-line-200);
	}

	.ifha-p .ifha-p-dock__fila {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		padding: 7px 0;
		font-size: 13.5px;
		line-height: 1.35;
	}

	.ifha-p .ifha-p-dock__fila + .ifha-p-dock__fila {
		border-top: 1px dashed var(--ifha-line-200);
	}

	.ifha-p .ifha-p-dock__fila > span:first-child {
		color: var(--ifha-gray-600);
	}

	.ifha-p .ifha-p-dock__fila > span:last-child {
		font-weight: 600;
		text-align: right;
	}

	.ifha-p .ifha-p-dock__fila--total > span:last-child {
		font-weight: 900;
		font-variant-numeric: tabular-nums;
	}

	.ifha-p .ifha-p-dock__fila--descuento > span:last-child {
		color: var(--ifha-green-800);
	}
}

@media (min-width: 900px) {
	/* En escritorio la barra no existe: el botón vuelve a su fila y el
	   resumen lo hace el panel lateral. */
	.ifha-p .ifha-p-dock {
		display: contents;
	}

	.ifha-p .ifha-p-dock__res {
		display: none !important;
	}
}

@media (min-width: 600px) {
	.ifha-p .ifha-p-volver-fila {
		justify-content: flex-end;
	}
}

/* ── 5. Sellos de confianza ── */
.ifha-p .ifha-p-sellos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 18px;
	margin: -6px 0 0;
	padding: 0;
	list-style: none;
}

.ifha-p .ifha-p-sellos__i {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	margin: 0;
	font-size: 13px;
	line-height: 1.3;
	color: var(--ifha-gray-600);
}

.ifha-p .ifha-p-sellos__i[hidden] {
	display: none;
}

.ifha-p .ifha-p-sellos__i svg {
	flex: none;
	color: var(--ifha-green-700);
}

.ifha-p .ifha-p-sellos__i--google svg {
	color: #E3A008;
}

.ifha-p .ifha-p-sellos__i a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--ifha-line-300);
	text-underline-offset: 3px;
}

.ifha-p .ifha-p-sellos__i a:hover {
	color: var(--ifha-blue-800);
	text-decoration-color: currentColor;
}

@media (min-width: 600px) {
	.ifha-p .ifha-p-sellos {
		justify-content: flex-end;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ifha-p .ifha-p-pasos__item.is-recien .ifha-p-pasos__glifo,
	.ifha-p .ifha-p-logro.is-entrando,
	.ifha-p .ifha-p-logro.is-entrando .ifha-p-logro__ico {
		animation: none !important;
	}

	.ifha-p .ifha-p-dock,
	.ifha-p .ifha-p-dock__chev {
		transition: none;
	}
}

/* =============================================================================
 * 1.1.1 · Pasarela sin errores de visualización (pedido de Lucas, 27-sep-2026)
 *
 *   1. «Copiar» de CBU/alias/cuenta: heredaba el texto BLANCO del botón de la
 *      banda azul y sobre la tarjeta blanca quedaba un óvalo verde vacío.
 *   2. Header del embudo que no flota: al volver a subir tapaba el título
 *      (y con la barra de administración dejaba un hueco de 46 px encima).
 *   3. Confirmación visible y «Cómo sigue» en la pantalla de instrucciones.
 *   4. Resumen corto de «Revisá y pagá» en dos líneas, sin palabras repetidas.
 * ========================================================================== */

/* ── 1. Copiar ── */
.ifha-p .ifha-p-copy.is-copiado,
.ifha-p .ifha-p-copy.is-copiado:hover,
.ifha-p .ifha-p-copy.is-copiado:focus {
	border-color: var(--ifha-green-500);
	background: var(--ifha-green-500);
	color: var(--ifha-green-900);
}

.ifha-p .ifha-p-copy--fila,
.ifha-p button.ifha-p-copy--fila {
	gap: 6px;
	min-height: var(--ifha-hit);
	margin: 0 0 0 10px;
	padding: 0 14px;
	border: 1.5px solid var(--ifha-green-700);
	background: var(--ifha-white);
	color: var(--ifha-green-800);
	font-size: 13px;
	letter-spacing: .01em;
}

/* (0,3,1) como mínimo: Astra pinta cualquier <button> al hover/foco con
   (0,1,1) y taparía el texto (ver astra-button-hover-tapa-texto). */
html body .ifha-p .ifha-p-copy--fila:hover,
html body .ifha-p .ifha-p-copy--fila:focus {
	border-color: var(--ifha-green-800);
	background: var(--ifha-green-50);
	color: var(--ifha-green-900);
}

html body .ifha-p .ifha-p-copy--fila.is-copiado,
html body .ifha-p .ifha-p-copy--fila.is-copiado:hover,
html body .ifha-p .ifha-p-copy--fila.is-copiado:focus {
	border-color: var(--ifha-green-700);
	background: var(--ifha-green-700);
	color: var(--ifha-white);
}

.ifha-p .ifha-p-copy:focus-visible {
	outline: 3px solid var(--ifha-blue-600);
	outline-offset: 2px;
}

/* En el celular cada dato va en su línea: el valor a la izquierda y el botón
   pegado a la derecha, en la misma fila, sin partir el CBU. */
@media (max-width: 599px) {
	.ifha-p .ifha-p-instr .ifha-p-datos td.ifha-p-datos__v {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		font-variant-numeric: tabular-nums;
		word-break: break-all;
	}

	.ifha-p .ifha-p-instr .ifha-p-copy--fila {
		flex: none;
		margin: 0;
	}
}

/* ── 2. Header del embudo: se va con el scroll, no vuelve encima del contenido.
   Mismo lugar en la página (fixed y absolute están los dos fuera del flujo). ── */
body.ifha-pagos .ifha-header {
	position: absolute;
}

/* ── 3. Confirmación y «Cómo sigue» ── */
.ifha-p .ifha-p-ok {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 1px solid #CFE6B4;
	border-radius: var(--ifha-radius-md);
	background: var(--ifha-green-50);
	color: var(--ifha-green-900);
}

.ifha-p .ifha-p-ok__glifo {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ifha-green-700);
	color: var(--ifha-white);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}

.ifha-p .ifha-p-ok__txt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	min-width: 0;
	font-size: 14.5px;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.ifha-p .ifha-p-ok__txt strong {
	font-size: 16px;
	font-weight: 700;
	color: var(--ifha-green-900);
}

.ifha-p .ifha-p-sigue {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}

.ifha-p .ifha-p-sigue__lista {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: ifha-sigue;
}

.ifha-p .ifha-p-sigue__lista li {
	position: relative;
	margin: 0;
	padding-left: 36px;
	min-height: 24px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ifha-ink);
	counter-increment: ifha-sigue;
}

.ifha-p .ifha-p-sigue__lista li::before {
	content: counter(ifha-sigue);
	position: absolute;
	top: 0;
	left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--ifha-blue-50);
	box-shadow: inset 0 0 0 1.5px var(--ifha-blue-100);
	color: var(--ifha-blue-800);
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ── 4. Resumen corto ── */
.ifha-p .ifha-p-mini__t {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ifha-p .ifha-p-mini__sub {
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ifha-gray-600);
}

/* El CTA del paso 3 en pila: la nota queda centrada bajo el botón en el
   celular y alineada con él desde 600 px. */
.ifha-p .ifha-p-cta .ifha-p-actions--pila .ifha-p-cta__nota {
	margin: 4px 0 0;
	text-align: center;
}

@media (min-width: 600px) {
	.ifha-p .ifha-p-cta .ifha-p-actions--pila .ifha-p-cta__nota {
		align-self: flex-end;
		max-width: 400px;
		text-align: right;
	}
}

.ifha-p .ifha-p-actions--pila .ifha-p-link--volver {
	margin-top: 4px;
	text-decoration: none;
}

.ifha-p .ifha-p-actions--pila .ifha-p-link--volver:hover,
.ifha-p .ifha-p-actions--pila .ifha-p-link--volver:focus-visible {
	text-decoration: underline;
}

/* El encabezado de cada tarjeta de banco («Banco Galicia · Cuenta corriente
   en pesos») es una tabla anidada sin padding en línea: el tema le ponía el
   suyo y el título quedaba corrido 16 px respecto de los datos de abajo. */
.ifha-p table.ifha-p-instr__card td > table:not(.ifha-p-datos) td {
	padding: 0 !important;
	border: 0 !important;
}

/* La fecha de inicio de la barra de acción se cortaba a 360 px («Empieza el
   10 de n…»): mejor dos líneas que una fecha a medias. */
@media (max-width: 899px) {
	.ifha-p .ifha-p-dock__t small {
		overflow: visible;
		text-overflow: clip;
		white-space: normal;
	}
}

/* Hover/foco del botón principal: el texto blanco sobre #6EA837 daba 2,87:1.
   Ahora el mismo texto oscuro sobre un verde un punto más profundo (5,2:1). */
.ifha-p .ifha-p-btn--primary:hover,
.ifha-p .ifha-p-btn--primary:focus,
.ifha-p a.ifha-p-btn--primary:hover,
.ifha-p a.ifha-p-btn--primary:focus {
	background: #7FBE3D;
	color: var(--ifha-green-900);
}

.ifha-p .ifha-p-proof__file--primario:hover {
	background: #7FBE3D;
	color: var(--ifha-green-900);
}

/* Desde 600 px la etiqueta y el valor van en la misma fila: centrados,
   para que «CBU» no quede arriba del número y su botón. */
@media (min-width: 600px) {
	.ifha-p .ifha-p-instr .ifha-p-datos td {
		vertical-align: middle !important;
	}
}

/* 1.14.0 · Completá tu ficha: objetivo y experiencia a todo el ancho. */
.ifha-p-ficha [data-ifha-ficha-campo="objetivo"],
.ifha-p-ficha [data-ifha-ficha-campo="experiencia"],
.ifha-p-ficha [data-ifha-ficha-campo="domicilio"] { grid-column: 1 / -1; }
.ifha-p .ifha-p-textarea { min-height: 76px; height: auto; padding-top: 12px; padding-bottom: 12px; line-height: 1.5; resize: vertical; font: inherit; }

/* -----------------------------------------------------------------------------
 * 1.21.0 · «Mi cursada»: la página personal del alumno.
 *
 * Mismo sistema que /pagos/ (tarjetas planas con hairline, Roboto, azul y
 * verde de IFHA). Arriba, tres tarjetas con lo que importa; debajo, las
 * secciones. Una columna en el celular; tres tarjetas en fila desde 720 px.
 * -------------------------------------------------------------------------- */
.ifha-p.ifha-mc .ifha-p-flow { gap: 16px; }
.ifha-p .ifha-mc-hero { padding-bottom: 4px; }
.ifha-p .ifha-mc-pill { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 3px 10px; border-radius: var(--ifha-radius-pill); font-size: 12.5px; font-weight: 500; line-height: 1.4; background: var(--ifha-surface-100); color: var(--ifha-gray-600); white-space: nowrap; }
.ifha-p .ifha-mc-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ifha-p .ifha-mc-pill--ok { background: var(--ifha-green-50); color: var(--ifha-green-800); }
.ifha-p .ifha-mc-pill--warn { background: #FDF1DC; color: #8A5300; }
.ifha-p .ifha-mc-pill--bad { background: #FCEBEB; color: #A12C2C; }
.ifha-p .ifha-mc-resumen { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ifha-p .ifha-mc-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; position: relative; overflow: hidden; }
.ifha-p .ifha-mc-tile--bad { border-color: #E3A3A3; box-shadow: inset 4px 0 0 var(--ifha-red-500); }
.ifha-p .ifha-mc-tile--warn { box-shadow: inset 4px 0 0 var(--ifha-amber-500); }
.ifha-p .ifha-mc-tile__t { font-size: 13px; color: var(--ifha-gray-600); }
.ifha-p .ifha-mc-tile__n { font-size: 24px; font-weight: 600; letter-spacing: -.01em; color: var(--ifha-ink); font-variant-numeric: tabular-nums; }
.ifha-p .ifha-mc-tile__s { font-size: 13px; line-height: 1.45; color: var(--ifha-gray-600); }
.ifha-p .ifha-mc-tile__btn { margin-top: 8px; align-self: flex-start; }
.ifha-p .ifha-mc-barra { display: block; height: 6px; margin: 6px 0 2px; border-radius: 3px; background: var(--ifha-surface-100); overflow: hidden; }
.ifha-p .ifha-mc-barra > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--ifha-green-700), var(--ifha-green-600)); }
.ifha-p .ifha-mc-h2 { margin: 0 0 12px; font-size: 17px; font-weight: 600; color: var(--ifha-ink); }
.ifha-p .ifha-mc-nota { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--ifha-gray-600); }
.ifha-p .ifha-mc-nota--top { margin: 0 0 12px; }
.ifha-p .ifha-mc-cuotas { list-style: none; margin: 0; padding: 0; display: grid; }
.ifha-p .ifha-mc-cuota { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 0; border-top: 1px solid var(--ifha-line-200); }
.ifha-p .ifha-mc-cuota:first-child { border-top: 0; padding-top: 0; }
.ifha-p .ifha-mc-cuota__n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ifha-surface-100); color: var(--ifha-gray-600); font-size: 13px; font-weight: 600; }
.ifha-p .ifha-mc-cuota--pagada .ifha-mc-cuota__n, .ifha-p .ifha-mc-cuota--exonerada .ifha-mc-cuota__n { background: var(--ifha-green-50); color: var(--ifha-green-800); }
.ifha-p .ifha-mc-cuota--vencida .ifha-mc-cuota__n { background: #FCEBEB; color: #A12C2C; }
.ifha-p .ifha-mc-cuota__d { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.ifha-p .ifha-mc-cuota__d b { font-weight: 500; font-size: 15px; color: var(--ifha-ink); }
.ifha-p .ifha-mc-cuota__d small { font-size: 13px; color: var(--ifha-gray-600); }
.ifha-p .ifha-mc-cuota .ifha-mc-pill { margin: 0; }
.ifha-p .ifha-mc-cuota__btn { flex: none; min-height: 40px; padding: 0 18px; }
.ifha-p .ifha-mc-practicas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ifha-p .ifha-mc-practica { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; border: 1px solid var(--ifha-line-300); border-radius: var(--ifha-radius-pill); font-size: 13.5px; color: var(--ifha-gray-600); font-variant-numeric: tabular-nums; }
.ifha-p .ifha-mc-practica__i { font-weight: 700; }
.ifha-p .ifha-mc-practica--presente { background: var(--ifha-green-50); border-color: var(--ifha-green-600); color: var(--ifha-green-800); }
.ifha-p .ifha-mc-practica--ausente { background: #FCEBEB; border-color: var(--ifha-red-500); color: #A12C2C; }
.ifha-p .ifha-mc-practica--proxima { border-style: dashed; }
.ifha-p .ifha-mc-dl { margin: 0; display: grid; gap: 10px; }
.ifha-p .ifha-mc-dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; }
.ifha-p .ifha-mc-dl dt { font-size: 14px; color: var(--ifha-gray-600); }
.ifha-p .ifha-mc-dl dd { margin: 0; font-size: 15px; color: var(--ifha-ink); text-align: right; }
.ifha-p .ifha-mc-dl dd .ifha-mc-pill { margin: 0; }
.ifha-p .ifha-mc-dl dd small { display: block; color: var(--ifha-gray-600); font-size: 12.5px; }
.ifha-p .ifha-mc-accesos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ifha-p .ifha-mc-accesos li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; margin: 0; font-size: 15px; color: var(--ifha-ink); }
.ifha-p .ifha-mc-accesos .ifha-mc-pill { margin: 0; white-space: normal; }
.ifha-p .ifha-mc-ayuda { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-radius: var(--ifha-radius-md); background: var(--ifha-blue-50); color: var(--ifha-blue-900); }
.ifha-p .ifha-mc-ayuda p { margin: 0; font-size: 14px; line-height: 1.5; flex: 1 1 260px; }
@media (min-width: 720px) {
	.ifha-p .ifha-mc-resumen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 1.21.1: los botones que no son el principal, con borde (sin él parecían un enlace suelto). */
.ifha-p.ifha-mc .ifha-p-btn:not(.ifha-p-btn--primary) { border: 1px solid var(--ifha-line-300); background: var(--ifha-white); color: var(--ifha-blue-800); min-height: 44px; padding: 0 20px; }
.ifha-p.ifha-mc .ifha-p-btn:not(.ifha-p-btn--primary):hover, .ifha-p.ifha-mc .ifha-p-btn:not(.ifha-p-btn--primary):focus { border-color: var(--ifha-blue-600); background: var(--ifha-blue-50); }

/* 1.23.0 · Mi cursada: «Entrar al campus» (el aula de Classroom de su cohorte). */
.ifha-p .ifha-mc-accesos .ifha-mc-campus { flex: 1 0 100%; min-height: 44px; margin: 4px 0 0; justify-content: center; text-align: center; }