/*
 * U16 · Método LOHA (componentes.md): el método del 01 y la banda de la
 * IA. Solo en el 01.
 *
 * Segunda revisión del cliente (noviembre de 2026): un solo bloque
 * continuo. El encabezado (rótulo, h2 y entradilla) sobre papel y, debajo,
 * las seis fases seguidas, con la misma estructura y jerarquía, cada una
 * en su panel --beige-100, como en las previas. Sin títulos intermedios:
 * fuera las dos mitades (Comprender en columnas sobre --azul-50 y
 * Materializar con su columna beige).
 *
 *   .loha-metodo__cabeza   el encabezado
 *   .loha-fase             el panel: número, línea vertical, rótulo (los
 *                          dos en el h3), pregunta y párrafo
 *   .loha-ia               la banda azul al pie (R1 --solido con R6)
 *
 * Mobile first. M: el número delante del rótulo, en su línea. Desde
 * 600 px, el número en su columna a la izquierda y una línea vertical
 * entre él y el texto. Nada tiene altura fija.
 *
 * Con JavaScript, el método y la IA son las dos pantallas de la cortina
 * del 01 (cortina.css; cambio del cliente, noviembre de 2026), con su
 * misma composición. Sin JavaScript, en el flujo de la página.
 */

.loha-metodo {
	/* Entre paneles; relleno del panel (el de las cajas, .loha-caja);
	   ancho de la columna del número (el de «00» a tamaño de H2) y aire a
	   cada lado de la línea vertical. */
	--fase-entre: clamp(0.75rem, 0.55rem + 0.6vw, 1.25rem);
	--fase-relleno: clamp(1.25rem, 0.8rem + 2vw, 3rem);
	--fase-columna-ancho: calc(var(--fs-h2) * 1.15);
	--fase-hueco: clamp(1rem, 0.6rem + 1.5vw, 2.5rem);
}

.loha-metodo__cabeza {
	padding: var(--separacion) var(--margen) 0;
}

.loha-metodo__fases {
	display: grid;
	gap: var(--fase-entre);
	padding: clamp(1.75rem, 1rem + 2.4vw, 3.5rem) var(--margen) var(--separacion);
}

/* ── El panel ─────────────────────────────────────────────── */

.loha-fase {
	position: relative;
	padding: var(--fase-relleno);
	border-radius: 6px;
}

/* El h3: el número en DM Serif, en el acento (sobre --beige-100, 3,47:
   va a tamaño de H2), y el rótulo en las mayúsculas de Manrope de los
   rótulos (--c-rotulo, 4,85). El rótulo se escribe normal en el campo,
   como los de R2. */
.loha-fase__titulo {
	display: flex;
	align-items: baseline;
	gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
	color: var(--c-rotulo);
	font-family: var(--sans);
	font-size: var(--fs-interfaz);
	font-weight: 600;
	line-height: var(--lh-interfaz);
}

.loha-fase__numero {
	flex: none;
	color: var(--c-acento);
	font-family: var(--serif);
	font-size: var(--fs-h2);
	font-weight: 400;
	line-height: 1;
}

.loha-fase__rotulo {
	letter-spacing: var(--tracking-mayusculas);
	text-transform: uppercase;
}

/* La pregunta, en DM Serif y en azul: ocupa el sitio y el tamaño de la
   antigua frase destacada. */
.loha-fase__pregunta {
	margin-top: clamp(0.75rem, 0.55rem + 0.6vw, 1.25rem);
	color: var(--c-texto);
	font-family: var(--serif);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	text-wrap: balance;
}

.loha-fase__parrafo {
	max-width: var(--lectura);
	margin-top: clamp(0.75rem, 0.55rem + 0.6vw, 1.25rem);
	color: var(--c-texto-2);
	font-size: var(--fs-lectura);
	line-height: var(--lh-lectura);
}

/* ── Desde 600 px: el número en su columna y la línea ─────── */
/* El número sale del flujo y se va a la columna de la izquierda, con su
   tinta a ras del relleno del panel; la línea vertical, de 1 px en
   --beige-500 (decorativa), va entre él y el texto, de arriba abajo del
   relleno. El texto de la fase queda en una sola columna a su derecha. */

@media (min-width: 600px) {
	.loha-fase {
		padding-left: calc(var(--fase-relleno) + var(--fase-columna-ancho) + 2 * var(--fase-hueco) + 1px);
	}

	.loha-fase::before {
		content: "";
		position: absolute;
		top: var(--fase-relleno);
		bottom: var(--fase-relleno);
		left: calc(var(--fase-relleno) + var(--fase-columna-ancho) + var(--fase-hueco));
		border-left: 1px solid var(--beige-500);
	}

	.loha-fase__numero {
		position: absolute;
		top: var(--fase-relleno);
		left: var(--fase-relleno);
		text-box: trim-both cap alphabetic;
	}
}

/* ── En la cortina ─────────────────────────────────────────── */
/* El método empieza a --area-segura, como las pantallas del 02: la
   cabecera C va superpuesta (cortina.css) y, con el relleno de la página
   (--separacion), tapaba el rótulo. */

.loha-js .loha-cortina .loha-metodo__cabeza {
	padding-top: var(--area-segura);
}

/* ── IA ───────────────────────────────────────────────────── */
/* Al pie del método, sin aire entre los dos: titular y párrafo a los
   lados de la línea vertical (R6). El párrafo, a tamaño de texto
   introductorio y en el texto secundario del azul. */

.loha-ia .loha-texto {
	color: var(--c-texto-2);
	font-size: var(--fs-intro);
	line-height: var(--lh-intro);
}