/*
 * U4 · Esquema Criterio LOHA (componentes.md, brief 02 páginas 7 y 12):
 * la instalación → círculo CRITERIO LOHA → la oferta del mercado.
 *
 * Segunda revisión del cliente (noviembre de 2026): tres zonas
 * equilibradas sobre papel, el azul solo en la caja de la oferta y las
 * dos flechas hacia la derecha. Antes, sobre el fondo partido (R1
 * --partido, retirado), con la oferta sobre la mitad azul y una flecha
 * doble.
 *
 * El círculo es perfecto (aspect-ratio: 1) y está centrado en la página:
 * en E y TA la rejilla es simétrica (lado · flecha · círculo · flecha ·
 * lado), así que su centro es el del contenido. Dentro, el nombre y el
 * descriptor se centran por su altura de mayúscula (text-box), no por la
 * caja de línea: centrado óptico.
 *
 * TV y M: apilado, instalación → círculo → oferta, con las flechas hacia
 * abajo y la oferta en su caja azul.
 */

/* TV y M: el círculo, entre 240 y 352 px. */
.loha-escena__contenido {
	--esquema-circulo: clamp(15rem, 13.5rem + 12vw, 22rem);
}

.loha-esquema {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1rem;
}

.loha-esquema__titulo {
	color: var(--c-texto);
	font-family: var(--sans);
	font-size: var(--fs-lectura);
	font-weight: 600;
	line-height: var(--lh-interfaz);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.loha-esquema__lado .loha-lista {
	margin-top: 1.25em;
}

/* La oferta, en una caja azul, en todos los tramos. */
.loha-esquema__lado--oscuro {
	padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
	border-radius: 6px;
}

/* ── Flechas ── */

.loha-esquema__flecha {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--beige-600);
}

.loha-esquema__flecha .loha-icono {
	width: 2rem;
	height: 2rem;
	transform: rotate(90deg);
}

/* ── Círculo ── */

.loha-esquema__centro {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: var(--esquema-circulo);
	aspect-ratio: 1;
	padding: calc(var(--esquema-circulo) * 0.13);
	border: 1.5px solid var(--beige-600);
	border-radius: 50%;
	background-color: var(--beige-100);
	color: var(--azul);
	text-align: center;
}

/* Tamaño propio del componente, ligado al diámetro del círculo
   (tipografia.md, específicos): no va a un escalón de la escala. */
.loha-esquema__nombre {
	font-family: var(--serif);
	font-size: calc(var(--esquema-circulo) * 0.128);
	line-height: 1;
	text-transform: uppercase;
	text-wrap: balance;
	text-box: trim-both cap alphabetic;
}

.loha-esquema__filete {
	width: 46%;
	margin-block: calc(var(--esquema-circulo) * 0.075);
	border-top-color: var(--beige-600);
}

/* Descriptor en Manrope 600 (brief 02). 13–14 px sobre --beige-100:
   --beige-700 (4,85). */
.loha-esquema__descriptor {
	color: var(--beige-700);
	font-size: var(--fs-micro);
	font-weight: 600;
	line-height: 1.55;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-wrap: balance;
	text-box: trim-both cap alphabetic;
}

/* ── E y TA: tres zonas equilibradas ── */

@media (min-width: 1024px) {
	/* La pantalla es contenedor: el círculo y las flechas, en unidades de
	   su ancho. */
	.loha-cortina__pantalla--3 {
		container-type: inline-size;
	}

	/* Cada zona lateral, como mucho 30rem: en pantallas grandes la caja
	   de la oferta no se estira (a 2560 medía 844 px, casi toda azul y
	   vacía) y el esquema queda centrado, con la nota a su ancho. */
	.loha-cortina__pantalla--3 > .loha-escena__contenido {
		--esquema-circulo: clamp(15rem, 22.7cqw, 26rem);
		--esquema-flecha: clamp(3rem, 7cqw, 8rem);
		--esquema-lado: 30rem;
		--esquema-ancho: calc(2 * var(--esquema-lado) + 2 * var(--esquema-flecha) + var(--esquema-circulo));
	}

	/* Lado · flecha · círculo · flecha · lado: simétrica, así que el
	   círculo queda en el centro del esquema. Las dos zonas de texto,
	   centradas en vertical con el círculo, como en la previa. */
	.loha-esquema {
		display: grid;
		grid-template-columns:
			minmax(0, var(--esquema-lado)) var(--esquema-flecha) var(--esquema-circulo)
			var(--esquema-flecha) minmax(0, var(--esquema-lado));
		justify-content: center;
		align-items: center;
		gap: 0;
	}

	/* La instalación, centrada en su zona, como en la previa: entre el
	   margen y la primera flecha queda el mismo aire a cada lado. La
	   oferta, en su caja, la llena. */
	.loha-esquema__lado--claro {
		justify-self: center;
		padding-inline: 1.5rem;
	}

	/* Flecha larga: el asta es una línea que ocupa la columna y termina
	   en la flecha de Lucide, que empieza su propia asta a 5/24 de su
	   caja. Las dos, hacia la derecha y del mismo color, sobre papel. */
	.loha-esquema__flecha {
		justify-content: stretch;
		padding-inline: 0.75rem;
	}

	.loha-esquema__flecha::before {
		content: "";
		flex: 1;
		border-top: 1.5px solid currentColor;
	}

	.loha-esquema__flecha .loha-icono {
		width: 1.75rem;
		height: 1.75rem;
		margin-left: calc(-1.75rem * 5 / 24);
		transform: none;
	}
}

/* TA: las zonas laterales son estrechas (unos 270 px a 1024). La
   instalación, desde el margen y sin relleno a la izquierda, y la caja
   con menos relleno, para que sus líneas no se partan de más. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.loha-esquema__lado--claro {
		justify-self: stretch;
		padding-inline: 0 1rem;
	}

	.loha-esquema__lado--oscuro {
		padding: 1.5rem 1.25rem;
	}
}

/* U5 · la nota, debajo del esquema, con el hueco de la escena entre los
   dos (nada se solapa) y a su ancho: a todo el del contenido hasta que
   el esquema llega a su máximo; desde ahí, centrada con él. */
@media (min-width: 1024px) {
	.loha-cortina__pantalla--3 .loha-esquema + .loha-nota {
		width: 100%;
		max-width: var(--esquema-ancho);
		margin-inline: auto;
	}
}