/* ==========================================================================
   utils.css — utilidades: outline de texto, revelado en scroll, ayudas varias
   ========================================================================== */

.text-outline {
	color: var(--c-bone);
	letter-spacing: .08em;
}

@supports (-webkit-text-stroke: 1px #000) {
	.text-outline {
		color: transparent;
		-webkit-text-stroke: 1px var(--c-bone);
	}

	.text-outline--accent {
		color: transparent;
		-webkit-text-stroke: 1px var(--c-cobalt);
	}
}

.text-balance {
	text-wrap: balance;
}

.eyebrow-dot::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c-cobalt);
	margin-right: 10px;
	vertical-align: middle;
}

/* --- patron de revelado: JS agrega la clase que oculta, nunca al reves --- */

.pre-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s var(--ease-stage), transform .7s var(--ease-stage);
}

.pre-reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.pre-reveal {
		transition: none;
		opacity: 1;
		transform: none;
	}
}

/* --- varios --- */

.divider {
	height: 1px;
	background: var(--c-line);
	border: 0;
	margin: 0;
}

.media-frame {
	border-radius: var(--radius-l);
	overflow: hidden;
}

.stack-gap {
	display: grid;
	gap: 14px;
}

.rule-space {
	margin: 64px 0;
}

.gap-top {
	margin-top: 32px;
}

.note-block {
	margin-top: 24px;
	font-size: 15px;
}

.tag {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid var(--c-line);
	font-size: 12.5px;
	color: var(--c-bone-dim);
}