/*
 * Círculos de palabras (portada). JS: assets/js/circulos-palabras.js.
 * Marcado: .ohayo-circulos > button.ohayo-circulos__circulo[data-giro] > span.ohayo-circulos__texto
 * Tamaño y posición de cada círculo (ancho, top, left, transform) en los estilos de su bloque.
 * El conjunto gira --giro-activo; cada palabra gira lo contrario para leerse siempre derecha.
 * Clase opcional ohayo-circulos--fijo-movil: en móvil el diagrama no gira.
 */
.ohayo-circulos {
	--linea: var(--line-color, rgb(255 255 255 / .8));
	--desplazamiento: 50%;
	position: sticky;
	top: 30px;
	display: flex;
	/* width en % (no 440px) para no ensanchar la columna de la rejilla en móvil */
	width: 100%;
	max-width: 440px;
	aspect-ratio: 1;
	margin: 0 0 100px;
	transform-origin: center 39.434%;
	transform: rotate(var(--giro-activo, 0deg)) translate(var(--desplazamiento));
	color: #000;
	font-size: 110%;
	font-weight: 600;
	transition: transform 1s ease;
}
.ohayo-circulos.is-girado { --desplazamiento: 0%; }

.ohayo-circulos__circulo {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 50%;
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	border: 3px dashed var(--linea);
	border-radius: 50%;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
	opacity: .45;
}
.ohayo-circulos:not(.is-girado) .ohayo-circulos__circulo:not(:hover) { opacity: .7; }
.ohayo-circulos__circulo:is(:hover, :focus-visible, [aria-expanded="true"]) { z-index: 2; opacity: 1; }
.ohayo-circulos__circulo:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.ohayo-circulos__texto {
	display: block;
	/* El JS reduce la letra de todo el diagrama solo si alguna palabra no cabe en su círculo */
	font-size: calc(1em * var(--escala-letra, 1));
	white-space: nowrap;
	transform: rotate(calc(var(--giro-activo, 0deg) * -1));
	transition: transform 1s ease;
}

/* Textos: mientras llega el JS no se ven (evita el salto); sin JS se leen todos. */
.ohayo-js .ohayo-circulos-textos:not(.is-listo) > * { display: none; }

.ohayo-circulos__circulo { transition: opacity .3s ease-out; }
/* Invitación a pulsar (JS, .is-invitando hasta el primer clic): los círculos se iluminan de uno en uno.
   Los demás bajan a .45 para que el iluminado destaque más; el cambio es lento. */
.ohayo-circulos.is-invitando .ohayo-circulos__circulo:not(:hover) { opacity: .45; transition: opacity .6s ease-in-out; }
.ohayo-circulos.is-invitando .ohayo-circulos__circulo.is-destello:not(:hover) { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.ohayo-circulos,
	.ohayo-circulos__texto { transition: none; }
}
/* Móvil. Por defecto el diagrama gira como en escritorio, con un giro base de 80° para que quepa
   (girado alrededor de transform-origin ocupa 1,16 veces su ancho y asoma un 18,4 % por la izquierda).
   Con la clase ohayo-circulos--fijo-movil no gira: ocupa todo el ancho, el círculo elegido se marca
   por opacidad y el JS quita el hueco vacío de debajo (--hueco-inferior). */
@media (max-width: 767px) {
	.ohayo-circulos:not(.ohayo-circulos--fijo-movil) {
		--desplazamiento: 0%;
		max-width: min(440px, 86%);
		margin-left: calc(min(440px, 86%) * .184);
		margin-bottom: -40px !important; /* gana al margen inferior que lleva el bloque */
		rotate: 80deg;
	}
	.ohayo-circulos:not(.ohayo-circulos--fijo-movil) .ohayo-circulos__texto { rotate: -80deg; }
	.ohayo-circulos--fijo-movil {
		transform: none;
		margin-bottom: calc(20px - var(--hueco-inferior, 0px)) !important;
	}
	.ohayo-circulos--fijo-movil .ohayo-circulos__texto { transform: none; }
}

/* Editor: el conjunto se ve en su posición inicial y las palabras se editan como texto. */
.editor-styles-wrapper .ohayo-circulos { position: relative; top: auto; }