/**
 * Campus: movimiento e interacción.
 *
 * Complementa campus.css: transiciones entre vistas, estados de lo que se mueve, se añade o se quita,
 * y los componentes con los que se interactúa directamente (medidores, simulador, arrastre, buscador rápido).
 * Todo el movimiento se apaga con «reducir movimiento».
 */
@layer components {

	/* ------------------------------------------------------------------ cambio de vista */

	.ruc-loadbar {
		position: fixed;
		inset-block-start: 0;
		inset-inline: 0;
		z-index: calc(var(--z-overlay) + 5);
		block-size: 3px;
		background: linear-gradient(90deg, var(--primary-500), var(--lime-400));
		transform: scaleX(0);
		transform-origin: 0 50%;
		opacity: 0;
		pointer-events: none;
	}

	.ruc-loadbar.is-on {
		opacity: 1;
		animation: ruc-load 8s cubic-bezier(.1, .7, .1, 1) forwards;
	}

	.ruc-loadbar.is-done {
		animation: none;
		transform: scaleX(1);
		opacity: 0;
		transition: transform 160ms var(--ease-out), opacity 200ms 80ms linear;
	}

	@keyframes ruc-load {
		to {
			transform: scaleX(.92);
		}
	}

	@keyframes ruc-rise {
		from {
			opacity: 0;
			transform: translateY(.75rem);
		}
	}

	@keyframes ruc-fade {
		from {
			opacity: 0;
		}
	}

	/* Al entrar en una vista, sus bloques suben uno tras otro. */
	.ruc-main[data-enter="view"] > *,
	.ruc-main[data-enter="view"] > [data-ruc-region] > *,
	.ruc-main[data-enter="view"] .ruc-grid > * {
		animation: ruc-rise 420ms var(--ease-out) both;
		animation-delay: calc(var(--i, 0) * 50ms);
	}

	.ruc-main[data-enter="view"] > [data-ruc-region] {
		animation: none;
	}

	.ruc-main[data-enter] > :nth-child(2),
	.ruc-main[data-enter] > [data-ruc-region] > :nth-child(2),
	.ruc-main[data-enter] .ruc-grid > :nth-child(2) {
		--i: 1;
	}

	.ruc-main[data-enter] > :nth-child(3),
	.ruc-main[data-enter] > [data-ruc-region] > :nth-child(3),
	.ruc-main[data-enter] .ruc-grid > :nth-child(3) {
		--i: 2;
	}

	.ruc-main[data-enter] > :nth-child(4),
	.ruc-main[data-enter] > [data-ruc-region] > :nth-child(4),
	.ruc-main[data-enter] .ruc-grid > :nth-child(4) {
		--i: 3;
	}

	.ruc-main[data-enter] > :nth-child(n + 5),
	.ruc-main[data-enter] > [data-ruc-region] > :nth-child(n + 5),
	.ruc-main[data-enter] .ruc-grid > :nth-child(n + 5) {
		--i: 4;
	}

	/* Pestañas y filtros: el contenido cambia en el sitio, sin desplazarse. */
	.ruc-main[data-enter="same"] > *,
	.ruc-main[data-enter="back"] > * {
		animation: ruc-fade 200ms linear both;
	}

	/* Una zona que se está repintando no se apaga: lo que cambia se anima al llegar. */
	[data-ruc-region][aria-busy="true"] {
		opacity: 1;
		cursor: auto;
	}

	/* ------------------------------------------------------------------ lo que entra, sale o vuelve */

	[data-flip] {
		transform-origin: 50% 50%;
	}

	.ruc .is-fresh {
		animation: ruc-new 1500ms var(--ease-out);
	}

	@keyframes ruc-new {
		0% {
			opacity: 0;
			transform: scale(.96);
			box-shadow: 0 0 0 0 rgb(95 98 248 / 0);
		}

		20% {
			opacity: 1;
			transform: none;
			box-shadow: 0 0 0 4px rgb(95 98 248 / .22);
		}

		100% {
			box-shadow: 0 0 0 4px rgb(95 98 248 / 0);
		}
	}

	.ruc .is-leaving {
		animation: ruc-leave 240ms var(--ease-out) forwards;
		pointer-events: none;
	}

	@keyframes ruc-leave {
		to {
			opacity: 0;
			transform: translateX(1.5rem);
		}
	}

	.ruc .is-back {
		animation: ruc-rise 320ms var(--ease-out);
	}

	.ruc .is-pop .ruc-icon {
		animation: ruc-pop 360ms var(--ease-out);
	}

	@keyframes ruc-pop {
		40% {
			transform: scale(1.35);
		}
	}

	[data-ruc-toggle][aria-pressed="true"] .ruc-icon {
		fill: currentColor;
		fill-opacity: .18;
		color: var(--accent);
	}

	.ruc-dot.is-bump {
		animation: ruc-bounce 700ms var(--ease-out);
	}

	.ruc-burst {
		position: fixed;
		z-index: calc(var(--z-overlay) + 4);
		pointer-events: none;
	}

	.ruc-burst span {
		position: absolute;
		inline-size: .5rem;
		block-size: .5rem;
		background: var(--primary-500);
		border-radius: 2px;
		animation: ruc-burst 950ms var(--ease-out) forwards;
	}

	.ruc-burst span[data-tone="1"] {
		background: var(--lime-400);
	}

	.ruc-burst span[data-tone="2"] {
		background: var(--success-500);
		border-radius: var(--radius-full);
	}

	.ruc-burst span[data-tone="3"] {
		background: var(--warning-500);
	}

	@keyframes ruc-burst {
		60% {
			opacity: 1;
		}

		100% {
			opacity: 0;
			transform: translate(var(--x), var(--y)) rotate(var(--r));
		}
	}

	@keyframes ruc-bounce {
		30% {
			transform: scale(1.5);
		}

		60% {
			transform: scale(.9);
		}
	}

	.ruc .ru-btn.is-done {
		background: var(--success-50);
		border-color: transparent;
		color: var(--success-700);
		opacity: 1;
	}

	/* Respuesta al pulsar. */
	.ruc .ru-btn:active,
	.ruc .ru-iconbtn:active,
	.ruc-nav__link:active {
		transform: scale(.97);
	}

	.ruc-tick:checked {
		animation: ruc-pop 320ms var(--ease-out);
	}

	/* ------------------------------------------------------------------ avisos con acción */

	.ruc-toast {
		display: flex;
		align-items: center;
		gap: var(--space-4);
		pointer-events: auto;
	}

	.ruc-toast__action {
		flex: none;
		min-block-size: 2rem;
		padding-inline: var(--space-3);
		background: rgb(255 255 255 / .14);
		border: 0;
		border-radius: var(--radius-md);
		font: inherit;
		font-weight: var(--weight-semibold);
		color: var(--lime-300);
		cursor: pointer;
	}

	.ruc-toast__action:hover {
		background: rgb(255 255 255 / .24);
	}

	.ruc-burst span,
	.ruc-loadbar {
		will-change: transform;
	}

	.ruc-toasts [hidden],
	.ruc-palette [hidden] {
		display: none;
	}

	/* ------------------------------------------------------------------ inicio: progreso */

	.ruc-pulse {
		position: relative;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: var(--space-6);
		padding: var(--space-6);
		background: linear-gradient(135deg, var(--primary-50), var(--neutral-0) 62%);
		border: 1px solid var(--primary-100);
		border-radius: var(--radius-xl);
		overflow: hidden;
	}

	.ruc-pulse__ring {
		position: relative;
		display: grid;
		place-items: center;
		inline-size: 6.5rem;
		block-size: 6.5rem;
	}

	.ruc-ring {
		grid-area: 1 / 1;
		inline-size: 100%;
		block-size: 100%;
		transform: rotate(-90deg);
	}

	.ruc-ring circle {
		fill: none;
		stroke-width: 10;
	}

	.ruc-ring__track {
		stroke: var(--primary-100);
	}

	.ruc-ring__value {
		stroke: var(--accent);
		stroke-linecap: round;
		stroke-dasharray: 100;
		stroke-dashoffset: calc(100 - var(--v, 0));
		transition: stroke-dashoffset 900ms var(--ease-out);
	}

	.ruc-pulse__pct {
		grid-area: 1 / 1;
		font-size: var(--text-h3);
		font-weight: var(--weight-bold);
		font-variant-numeric: tabular-nums;
		letter-spacing: var(--tracking-snug);
		color: var(--primary-800);
	}

	.ruc-pulse__text {
		display: grid;
		justify-items: start;
		gap: var(--space-2);
		min-inline-size: 0;
	}

	.ruc-pulse__lead {
		color: var(--text-secondary);
	}

	.ruc-pulse__lead strong {
		font-weight: var(--weight-semibold);
		color: var(--text);
	}

	.ruc-pulse__cta {
		margin-block-start: var(--space-2);
	}

	.ruc-pulse__cta .ruc-icon {
		transition: transform var(--dur) var(--ease-out);
	}

	.ruc-pulse__cta:hover .ruc-icon {
		transform: translateX(3px);
	}

	.ruc-pulse__steps {
		inline-size: 100%;
		margin-block-start: var(--space-1);
	}

	.ruc-pulse__steps > summary {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1);
		min-block-size: 2rem;
		font-size: var(--text-body-sm);
		font-weight: var(--weight-medium);
		color: var(--link);
		cursor: pointer;
		list-style: none;
	}

	.ruc-pulse__steps > summary::-webkit-details-marker {
		display: none;
	}

	.ruc-pulse__steps > summary .ruc-icon {
		inline-size: 1rem;
		block-size: 1rem;
		transform: rotate(90deg);
		transition: transform var(--dur) var(--ease-out);
	}

	.ruc-pulse__steps[open] > summary .ruc-icon {
		transform: rotate(-90deg);
	}

	.ruc-pulse__steps[open] > .ruc-todo {
		margin-block-start: var(--space-2);
		animation: ruc-rise 260ms var(--ease-out);
	}

	@media (max-width: 29.99rem) {
		.ruc-pulse {
			grid-template-columns: minmax(0, 1fr);
			justify-items: start;
		}

		.ruc-pulse__ring {
			inline-size: 5rem;
			block-size: 5rem;
		}
	}

	/* ------------------------------------------------------------------ inicio: cifras */

	.ruc-stats {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-3);
	}

	.ruc-stat {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		column-gap: var(--space-3);
		block-size: 100%;
		padding: var(--space-4);
		background: var(--neutral-0);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
	}

	.ruc-stat:hover {
		transform: translateY(-2px);
		border-color: var(--primary-200);
		box-shadow: var(--shadow-md);
	}

	.ruc-stat__icon {
		grid-row: span 2;
		display: grid;
		place-items: center;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		background: var(--accent-soft);
		border-radius: var(--radius-md);
		color: var(--accent);
	}

	.ruc-stat__n {
		font-size: var(--text-h3);
		font-weight: var(--weight-bold);
		font-variant-numeric: tabular-nums;
		letter-spacing: var(--tracking-snug);
		line-height: 1.1;
	}

	.ruc-stat__n--text {
		font-size: var(--text-body);
		font-weight: var(--weight-semibold);
	}

	.ruc-stat__label {
		font-size: var(--text-label);
		color: var(--text-secondary);
	}

	@media (min-width: 56rem) {
		.ruc-stats {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
	}

	/* ------------------------------------------------------------------ medidor de nota */

	.ruc-gauge {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		margin-block-start: var(--space-2);
	}

	.ruc-gauge__track {
		position: relative;
		flex: 1;
		max-inline-size: 16rem;
		block-size: .5rem;
		background: var(--chart-track);
		border-radius: var(--radius-full);
	}

	.ruc-gauge__you {
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		inline-size: calc(var(--you, 0) * 1%);
		background: var(--primary-300);
		border-radius: var(--radius-full);
		opacity: 0;
		transition: inline-size 300ms var(--ease-out), opacity var(--dur) linear;
	}

	.ruc-gauge.has-you .ruc-gauge__you {
		opacity: 1;
	}

	.ruc-gauge__cut {
		position: absolute;
		inset-block: -.3rem;
		inset-inline-start: calc(var(--cut, 0) * 1%);
		inline-size: 3px;
		margin-inline-start: -1.5px;
		background: var(--neutral-800);
		border-radius: 2px;
	}

	.ruc-gauge__gap {
		flex: none;
		min-inline-size: 3.75rem;
		font-size: var(--text-label);
		font-weight: var(--weight-semibold);
		font-variant-numeric: tabular-nums;
	}

	.ruc-gauge__gap:empty {
		display: none;
	}

	/* ------------------------------------------------------------------ agenda */

	.ruc-quickadd {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		margin-block-end: var(--space-4);
	}

	.ruc-quickadd .ru-input {
		min-block-size: var(--control-sm);
		padding-inline-end: 3rem;
		background: var(--bg-subtle);
		border-color: transparent;
	}

	.ruc-quickadd .ru-input:focus {
		background: var(--neutral-0);
	}

	.ruc-quickadd__go {
		position: absolute;
		inset-block-start: 0;
		inset-inline-end: 0;
		inline-size: var(--control-sm);
		block-size: var(--control-sm);
		color: var(--accent);
	}

	.ruc-quickadd .ru-form-msg:empty {
		display: none;
	}

	.ruc-agenda li {
		border-radius: var(--radius-md);
	}

	.ruc-agenda__text {
		flex: 1;
	}

	.ruc-when {
		flex: none;
		padding: .15rem var(--space-2);
		background: var(--bg-muted);
		border-radius: var(--radius-full);
		font-size: var(--text-caption);
		font-weight: var(--weight-medium);
		color: var(--neutral-700);
		white-space: nowrap;
	}

	.ruc-when--soon {
		background: var(--warning-50);
		color: var(--warning-700);
	}

	.ruc-when--now,
	.ruc-when--late {
		background: var(--error-50);
		color: var(--error-700);
	}

	/* ------------------------------------------------------------------ carril horizontal */

	.ruc-rail {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(13.5rem, 15rem);
		gap: var(--space-3);
		margin-inline: calc(var(--space-6) * -1);
		padding: var(--space-1) var(--space-6) var(--space-3);
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scroll-padding-inline: var(--space-6);
		scrollbar-width: thin;
	}

	.ruc-railcard {
		position: relative;
		display: grid;
		align-content: start;
		gap: var(--space-1);
		padding: var(--space-4);
		background: var(--neutral-0);
		border: 1px solid var(--border);
		border-radius: var(--radius-lg);
		scroll-snap-align: start;
		transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
	}

	.ruc-railcard:hover {
		transform: translateY(-2px);
		border-color: var(--primary-200);
		box-shadow: var(--shadow-md);
	}

	.ruc-railcard__icon {
		display: grid;
		place-items: center;
		inline-size: 2.25rem;
		block-size: 2.25rem;
		margin-block-end: var(--space-2);
		background: var(--bg-muted);
		border-radius: var(--radius-md);
		color: var(--text-secondary);
	}

	.ruc-railcard__name {
		font-size: var(--text-body-sm);
		font-weight: var(--weight-semibold);
		line-height: var(--leading-snug);
	}

	/* Toda la tarjeta lleva a la ficha; los botones quedan por encima. */
	a.ruc-railcard__name::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
	}

	.ruc-railcard__detail {
		font-size: var(--text-label);
		color: var(--text-muted);
	}

	.ruc-railcard__actions {
		position: relative;
		z-index: 1;
		margin-block-start: var(--space-3);
	}

	/* ------------------------------------------------------------------ buscador rápido */

	.ruc-nav__search {
		display: none;
	}

	.ruc-palette {
		inline-size: min(40rem, calc(100vw - 2rem));
		max-block-size: min(32rem, calc(100dvh - 6rem));
		margin: 12vh auto auto;
		padding: 0;
		background: var(--neutral-0);
		border: 1px solid var(--border);
		border-radius: var(--radius-xl);
		box-shadow: var(--shadow-lg);
		color: var(--text);
		overflow: hidden;
	}

	.ruc-palette[open] {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr) auto auto;
		animation: ruc-palette-in 180ms var(--ease-out);
	}

	.ruc-palette::backdrop {
		background: var(--overlay);
		animation: ruc-fade 160ms linear;
	}

	@keyframes ruc-palette-in {
		from {
			opacity: 0;
			transform: translateY(-.5rem) scale(.98);
		}
	}

	.ruc-palette__box {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		padding: var(--space-3) var(--space-4);
		border-block-end: 1px solid var(--border);
		color: var(--text-muted);
	}

	.ruc-palette__box input {
		flex: 1;
		min-inline-size: 0;
		min-block-size: var(--control-sm);
		background: none;
		border: 0;
		outline: 0;
		font: inherit;
		font-size: var(--text-body-lg);
		color: var(--text);
	}

	.ruc-palette__box input::-webkit-search-cancel-button {
		display: none;
	}

	.ruc-palette__crumb {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1);
		max-inline-size: 45%;
		min-block-size: 2rem;
		padding-inline: var(--space-3) var(--space-2);
		background: var(--accent-soft);
		border: 0;
		border-radius: var(--radius-full);
		font: inherit;
		font-size: var(--text-body-sm);
		font-weight: var(--weight-medium);
		color: var(--primary-800);
		cursor: pointer;
	}

	.ruc-palette__crumb > span:first-child {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.ruc-palette__crumb .ruc-icon {
		flex: none;
		inline-size: .875rem;
		block-size: .875rem;
	}

	.ruc-palette__esc {
		flex: none;
		min-block-size: 2rem;
		padding-inline: var(--space-2);
		background: var(--bg-muted);
		border: 0;
		border-radius: var(--radius-sm);
		font: inherit;
		font-size: var(--text-caption);
		font-weight: var(--weight-medium);
		color: var(--text-secondary);
		cursor: pointer;
	}

	.ruc-palette__list {
		margin: 0;
		padding: var(--space-2);
		list-style: none;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.ruc-palette__list:empty {
		display: none;
	}

	.ruc-palette__list > li {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		min-block-size: var(--tap);
		padding: var(--space-2) var(--space-3);
		border-radius: var(--radius-md);
		cursor: pointer;
	}

	.ruc-palette__list > li[aria-selected="true"] {
		background: var(--accent-soft);
	}

	.ruc-palette__mark {
		flex: none;
		display: grid;
		place-items: center;
		inline-size: 2rem;
		block-size: 2rem;
		background: var(--bg-muted);
		border-radius: var(--radius-md);
		font-size: var(--text-body-sm);
		font-weight: var(--weight-semibold);
		color: var(--text-secondary);
	}

	.ruc-palette__list > li[aria-selected="true"] .ruc-palette__mark {
		background: var(--neutral-0);
		color: var(--accent);
	}

	.ruc-palette__mark svg {
		inline-size: 1.125rem;
		block-size: 1.125rem;
	}

	.ruc-palette__name {
		flex: 1;
		min-inline-size: 0;
		font-weight: var(--weight-medium);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.ruc-palette__meta {
		flex: none;
		max-inline-size: 45%;
		font-size: var(--text-label);
		color: var(--text-muted);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.ruc-palette__status {
		margin: 0;
		padding-inline: var(--space-4);
		font-size: var(--text-body-sm);
		color: var(--text-secondary);
	}

	.ruc-palette__status:not(:empty) {
		padding-block: var(--space-3);
	}

	.ruc-palette__hint {
		display: none;
		margin: 0;
		padding: var(--space-2) var(--space-4);
		background: var(--bg-subtle);
		border-block-start: 1px solid var(--border);
		font-size: var(--text-caption);
		color: var(--text-muted);
	}

	.ruc-palette kbd,
	.ruc-nav__search kbd {
		display: inline-block;
		min-inline-size: 1.25rem;
		padding: 0 .3rem;
		background: var(--neutral-0);
		border: 1px solid var(--border-strong);
		border-radius: var(--radius-sm);
		font-family: inherit;
		font-size: var(--text-caption);
		line-height: 1.5;
		text-align: center;
		color: var(--text-secondary);
	}

	@media (max-width: 39.99rem) {
		.ruc-palette {
			margin-block-start: var(--space-4);
			max-block-size: calc(100dvh - 2rem);
		}

		.ruc-palette__meta {
			display: none;
		}
	}

	@media (min-width: 64rem) {
		.ruc-nav__search {
			display: flex;
			align-items: center;
			gap: var(--space-3);
			inline-size: 100%;
			min-block-size: var(--control-sm);
			margin-block-end: var(--space-3);
			padding-inline: var(--space-3);
			background: var(--bg-subtle);
			border: 1px solid var(--border);
			border-radius: var(--radius-md);
			font: inherit;
			font-size: var(--text-body-sm);
			color: var(--text-muted);
			cursor: pointer;
			transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
		}

		.ruc-nav__search:hover {
			background: var(--neutral-0);
			border-color: var(--primary-300);
			color: var(--text);
		}

		.ruc-nav__search > span {
			flex: 1;
			text-align: start;
		}

		.ruc-palette__hint {
			display: block;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.ruc *,
	.ruc *::before,
	.ruc *::after,
	.ruc-palette,
	.ruc-palette::backdrop,
	.ruc-dialog,
	.ruc-dialog::backdrop,
	.ruc-loadbar,
	.ruc-toast {
		animation-duration: 1ms;
		animation-delay: 0s;
		animation-iteration-count: 1;
		transition-duration: 1ms;
	}
}

/* El cambio de vista es un fundido corto: la cabecera y la navegación no se mueven. */
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 160ms;
}

@layer components {

	/* ------------------------------------------------------------------ inicio: separación de bloques */

	[data-ruc-region="dashboard"] {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-4);
	}

	/* ------------------------------------------------------------------ mi plan: simulador de nota */

	.ruc-sim {
		display: grid;
		gap: var(--space-3);
		margin-block-end: var(--space-4);
		padding: var(--space-4) var(--space-6) var(--space-6);
		background: var(--bg-subtle);
		border: 1px solid transparent;
		border-radius: var(--radius-xl);
		transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
	}

	.ruc-sim.is-trying {
		background: var(--primary-50);
		border-color: var(--primary-200);
	}

	.ruc-sim__head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-4);
	}

	.ruc .ruc-sim__title {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		font-size: var(--text-body-sm);
		font-weight: var(--weight-semibold);
		letter-spacing: 0;
		color: var(--neutral-800);
	}

	.ruc-sim__title .ruc-icon {
		inline-size: 1rem;
		block-size: 1rem;
		color: var(--text-muted);
	}

	.ruc-sim__out {
		font-size: var(--text-h2);
		font-weight: var(--weight-bold);
		font-variant-numeric: tabular-nums;
		letter-spacing: var(--tracking-snug);
		line-height: 1;
		color: var(--primary-800);
	}

	.ruc-range {
		appearance: none;
		inline-size: 100%;
		block-size: var(--tap);
		margin: 0;
		background: none;
		cursor: pointer;
		touch-action: pan-y;
	}

	.ruc-range::-webkit-slider-runnable-track {
		block-size: .5rem;
		background: var(--neutral-200);
		border-radius: var(--radius-full);
	}

	.ruc-range::-moz-range-track {
		block-size: .5rem;
		background: var(--neutral-200);
		border-radius: var(--radius-full);
	}

	.ruc-range::-webkit-slider-thumb {
		appearance: none;
		inline-size: 1.75rem;
		block-size: 1.75rem;
		margin-block-start: -.625rem;
		background: var(--accent);
		border: 3px solid var(--neutral-0);
		border-radius: var(--radius-full);
		box-shadow: var(--shadow-md);
		transition: transform var(--dur-fast) var(--ease-out);
	}

	.ruc-range::-moz-range-thumb {
		inline-size: 1.375rem;
		block-size: 1.375rem;
		background: var(--accent);
		border: 3px solid var(--neutral-0);
		border-radius: var(--radius-full);
		box-shadow: var(--shadow-md);
	}

	.ruc-range:active::-webkit-slider-thumb {
		transform: scale(1.15);
	}

	.ruc-range:focus-visible {
		outline: 2px solid var(--focus);
		outline-offset: 2px;
		border-radius: var(--radius-md);
	}

	.ruc-sim__scale {
		display: flex;
		justify-content: space-between;
		margin-block-start: calc(var(--space-3) * -1);
		padding-inline: .5rem;
		font-size: var(--text-caption);
		font-variant-numeric: tabular-nums;
		color: var(--text-muted);
	}

	.ruc-sim__form {
		display: flex;
		flex-wrap: wrap;
		align-items: end;
		gap: var(--space-3);
	}

	.ruc-sim__form .ru-field {
		inline-size: 11rem;
	}

	.ruc-sim__form .ru-form-msg {
		flex-basis: 100%;
	}

	.ruc-sim__form .ru-form-msg:empty {
		display: none;
	}

	.ruc-sim__trying {
		font-size: var(--text-body-sm);
		font-weight: var(--weight-medium);
		color: var(--primary-800);
	}

	/* ------------------------------------------------------------------ mi plan: opciones */

	.ruc-item {
		transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
	}

	.ruc-item:hover {
		border-color: var(--border-strong);
	}

	.ruc-item__grip {
		position: relative;
		cursor: grab;
		touch-action: none;
		user-select: none;
		transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
	}

	.ruc-item__grip .ruc-icon {
		position: absolute;
		inline-size: 1.125rem;
		block-size: 1.125rem;
		stroke-width: 2.5;
		opacity: 0;
	}

	.ruc-item:hover .ruc-item__grip,
	.ruc-item.is-dragging .ruc-item__grip {
		background: var(--accent);
		color: var(--neutral-0);
	}

	.ruc-item:hover .ruc-item__grip > span,
	.ruc-item.is-dragging .ruc-item__grip > span {
		opacity: 0;
	}

	.ruc-item:hover .ruc-item__grip .ruc-icon,
	.ruc-item.is-dragging .ruc-item__grip .ruc-icon {
		opacity: 1;
	}

	.ruc-item.is-dragging {
		position: relative;
		z-index: 2;
		border-color: var(--primary-300);
		box-shadow: var(--shadow-lg);
		cursor: grabbing;
	}

	.ruc-item.is-dragging .ruc-item__grip {
		cursor: grabbing;
	}

	.ruc .is-sorting {
		user-select: none;
	}

	.ruc-gauge--lg {
		margin-block-start: var(--space-3);
	}

	.ruc-gauge--lg .ruc-gauge__track {
		max-inline-size: 22rem;
		block-size: .625rem;
	}

	.ruc-gauge--lg .ruc-gauge__gap {
		font-size: var(--text-body);
	}

	/* El estado, con su color: se ve de un vistazo en qué punto está cada opción. */
	.ruc-select--status {
		background: none;
		padding: 0;
	}

	.ruc-select--status select {
		background-color: var(--bg-muted);
		border-color: transparent;
		border-radius: var(--radius-full);
		font-weight: var(--weight-medium);
		color: var(--neutral-800);
	}

	.ruc-select--status.ruc-status--will_apply select,
	.ruc-select--status.ruc-status--applied select {
		background-color: var(--accent-soft);
		color: var(--primary-800);
	}

	.ruc-select--status.ruc-status--admitted select,
	.ruc-select--status.ruc-status--enrolling select {
		background-color: var(--success-50);
		color: var(--success-700);
	}

	.ruc-select--status.ruc-status--waitlist select {
		background-color: var(--warning-50);
		color: var(--warning-700);
	}

	.ruc-note[data-ruc-hasnote="1"] .ruc-note__none,
	.ruc-note[data-ruc-hasnote="0"] .ruc-note__has {
		display: none;
	}

	.ruc-note[data-ruc-hasnote="1"] > summary {
		color: var(--primary-800);
	}

	.ruc-note[open] > .ruc-note__box {
		animation: ruc-rise 220ms var(--ease-out);
	}

	.ruc-savestate {
		display: flex;
		justify-content: space-between;
		gap: var(--space-3);
		font-size: var(--text-caption);
		color: var(--text-muted);
	}

	[data-ruc-savestate][data-kind="ok"] {
		font-weight: var(--weight-medium);
		color: var(--success-700);
	}

	[data-ruc-savestate][data-kind="error"] {
		color: var(--error-700);
	}

	textarea[data-ruc-grow] {
		resize: none;
		overflow: hidden;
	}

	/* ------------------------------------------------------------------ mi plan: tareas, fechas y notas */

	.ruc-task,
	.ruc-date,
	.ruc-notecard {
		transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
	}

	.ruc-task:hover,
	.ruc-date:hover {
		border-color: var(--border-strong);
	}

	.ruc-task .ru-iconbtn,
	.ruc-date .ru-iconbtn,
	.ruc-notecard .ru-iconbtn {
		color: var(--neutral-500);
	}

	.ruc-task .ru-iconbtn:hover,
	.ruc-date .ru-iconbtn:hover,
	.ruc-notecard .ru-iconbtn:hover {
		color: var(--error-700);
	}

	.ruc-task.is-done {
		background: var(--bg-subtle);
	}

	.ruc-task__text span {
		transition: color var(--dur) var(--ease-out);
	}
}

@layer components {

	/* ------------------------------------------------------------------ explorar: mapa siempre a mano */

	.ruc-explore {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-6);
	}

	.ruc-explore__map {
		display: grid;
		gap: var(--space-3);
		min-inline-size: 0;
	}

	.ruc-explore__pane {
		min-inline-size: 0;
	}

	.ruc-explore__pane > * + * {
		margin-block-start: var(--space-4);
	}

	.ruc-explore__online {
		display: inline-flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
		justify-self: start;
		min-block-size: var(--control-sm);
		padding-inline: var(--space-4);
		background: var(--neutral-0);
		border: 1px solid var(--border);
		border-radius: var(--radius-full);
		font-size: var(--text-body-sm);
		font-weight: var(--weight-medium);
		transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
	}

	.ruc-explore__online:hover,
	.ruc-explore__online[aria-current] {
		border-color: var(--accent);
		background: var(--accent-soft);
		color: var(--primary-800);
	}

	.ruc-tile {
		position: relative;
	}

	.ruc-tile[aria-current] {
		border-color: var(--accent);
		box-shadow: var(--ring);
	}

	a.ruc-tile:active {
		transform: scale(.94);
	}

	/* Nombre de la comunidad al pasar por encima o al llegar con el teclado. */
	.ruc-tile[data-tip]::after {
		content: attr(data-tip);
		position: absolute;
		inset-block-end: calc(100% + .375rem);
		inset-inline-start: 50%;
		z-index: 3;
		padding: .25rem var(--space-2);
		background: var(--neutral-900);
		border-radius: var(--radius-sm);
		font-size: var(--text-caption);
		font-weight: var(--weight-medium);
		color: var(--neutral-0);
		white-space: nowrap;
		opacity: 0;
		transform: translate(-50%, .25rem);
		transition: opacity var(--dur-fast) linear, transform var(--dur-fast) var(--ease-out);
		pointer-events: none;
	}

	.ruc-tile[data-tip]:hover::after,
	.ruc-tile[data-tip]:focus-visible::after {
		opacity: 1;
		transform: translate(-50%, 0);
	}

	.ruc-main[data-enter="view"] .ruc-tile {
		animation: ruc-tile-in 380ms var(--ease-out) both;
		animation-delay: calc((var(--c, 1) + var(--r, 1)) * 28ms);
	}

	@keyframes ruc-tile-in {
		from {
			opacity: 0;
			transform: scale(.6);
		}
	}

	/* Por debajo del nivel de España el mapa se queda al lado, en pequeño. */
	.ruc-explore:not(.ruc-explore--spain) .ruc-explore__map {
		display: none;
	}

	@media (min-width: 64rem) {
		.ruc-explore:not(.ruc-explore--spain) {
			grid-template-columns: 15rem minmax(0, 1fr);
			align-items: start;
		}

		.ruc-explore:not(.ruc-explore--spain) .ruc-explore__map {
			position: sticky;
			inset-block-start: calc(var(--header-h) + var(--space-4));
			display: grid;
		}

		.ruc-explore:not(.ruc-explore--spain) .ruc-map {
			gap: 3px;
			padding: var(--space-2);
			border-radius: var(--radius-lg);
		}

		.ruc-explore:not(.ruc-explore--spain) .ruc-tile {
			border-width: 1px;
			border-radius: var(--radius-sm);
		}

		.ruc-explore:not(.ruc-explore--spain) .ruc-tile__code {
			font-size: .5rem;
			letter-spacing: 0;
		}

		.ruc-explore:not(.ruc-explore--spain) .ruc-tile__n,
		.ruc-explore:not(.ruc-explore--spain) .ruc-legend {
			display: none;
		}
	}

	/* ------------------------------------------------------------------ filtros al instante */

	.ruc-filterbar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2) var(--space-3);
	}

	.ruc-filterbar__field {
		position: relative;
		flex: 1 1 14rem;
		max-inline-size: 24rem;
		color: var(--text-muted);
	}

	.ruc-filterbar__field .ruc-icon {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: var(--space-3);
		inline-size: 1.125rem;
		block-size: 1.125rem;
		transform: translateY(-50%);
		pointer-events: none;
	}

	.ruc-filterbar__field .ru-input {
		min-block-size: var(--control-sm);
		padding-inline-start: 2.5rem;
	}

	.ruc-filterbar__chips {
		display: flex;
		gap: var(--space-2);
	}

	.ruc-filterbar .ru-chip {
		cursor: pointer;
		transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
	}

	.ruc-filterbar .ru-chip[aria-pressed="true"] {
		background: var(--neutral-900);
		border-color: var(--neutral-900);
		color: var(--neutral-0);
	}

	.ruc-filterbar__count {
		font-size: var(--text-label);
		font-variant-numeric: tabular-nums;
		color: var(--text-muted);
	}

	.ruc-leafrow {
		display: flex;
		align-items: stretch;
		gap: var(--space-1);
		min-inline-size: 0;
	}

	.ruc-leafrow > .ruc-leaf {
		flex: 1;
		min-inline-size: 0;
	}

	.ruc-leafrow__add {
		flex: none;
		align-self: center;
		color: var(--accent);
	}

	.ruc-leafrow__add.is-done {
		color: var(--success-700);
		opacity: 1;
	}

	.ruc-node,
	.ruc-leaf,
	.ruc-course {
		transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out);
	}

	a.ruc-node:hover {
		transform: translateX(3px);
	}

	a.ruc-node:hover .ruc-node__go {
		color: var(--accent);
		transform: translateX(3px);
	}

	.ruc-node__go {
		transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
	}
}

@layer components {

	/* ------------------------------------------------------------------ comunidad */

	/* El cuadro para publicar empieza en una línea y se abre al entrar en él. */
	.ruc-composer[data-ruc-composer]:not(.is-open):not(:focus-within) > .ruc-kinds,
	.ruc-composer[data-ruc-composer]:not(.is-open):not(:focus-within) > .ruc-composer__foot {
		display: none;
	}

	.ruc-composer[data-ruc-composer]:not(.is-open):not(:focus-within) textarea {
		min-block-size: var(--control-md);
		block-size: var(--control-md);
	}

	.ruc-composer.is-open > .ruc-kinds,
	.ruc-composer.is-open > .ruc-composer__foot {
		animation: ruc-rise 240ms var(--ease-out);
	}

	.ruc-composer {
		transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
	}

	.ruc-counter {
		position: relative;
		flex: none;
		display: grid;
		place-items: center;
		inline-size: 2rem;
		block-size: 2rem;
		font-size: var(--text-caption);
		font-weight: var(--weight-semibold);
		font-variant-numeric: tabular-nums;
		color: var(--text-muted);
	}

	.ruc-counter svg {
		position: absolute;
		inset: 0;
		inline-size: 100%;
		block-size: 100%;
		transform: rotate(-90deg);
	}

	.ruc-counter circle {
		fill: none;
		stroke-width: 2.5;
	}

	.ruc-counter__track {
		stroke: var(--neutral-200);
	}

	.ruc-counter__value {
		stroke: var(--accent);
		stroke-linecap: round;
		stroke-dasharray: 100;
		stroke-dashoffset: calc(100 - var(--v, 0));
		transition: stroke-dashoffset var(--dur-fast) linear, stroke var(--dur) linear;
	}

	.ruc-counter.is-low {
		color: var(--error-700);
	}

	.ruc-counter.is-low .ruc-counter__value {
		stroke: var(--error-600);
	}

	.ruc-post {
		transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
	}

	.ruc-posts:not(.ruc-posts--flat) > .ruc-post:hover {
		border-color: var(--border-strong);
		box-shadow: var(--shadow-sm);
	}

	.ruc-act[aria-pressed="true"] [data-ruc-count] {
		font-weight: var(--weight-semibold);
	}

	.ruc-more[open] > .ruc-more__menu {
		animation: ruc-menu 160ms var(--ease-out);
		transform-origin: 100% 0;
	}

	@keyframes ruc-menu {
		from {
			opacity: 0;
			transform: scale(.96) translateY(-.25rem);
		}
	}

	.ruc-morewrap [aria-busy="true"] {
		opacity: 1;
	}

	.ruc-morewrap [aria-busy="true"]::after {
		content: "";
		inline-size: 1rem;
		block-size: 1rem;
		border: 2px solid currentColor;
		border-inline-end-color: transparent;
		border-radius: var(--radius-full);
		animation: ruc-spin 700ms linear infinite;
	}

	@keyframes ruc-spin {
		to {
			transform: rotate(360deg);
		}
	}

	/* ------------------------------------------------------------------ primeros pasos */

	.ruc-onb[data-dir="forward"] .ruc-onb__step:not([hidden]) {
		animation: ruc-step-next 360ms var(--ease-out);
	}

	.ruc-onb[data-dir="back"] .ruc-onb__step:not([hidden]) {
		animation: ruc-step-prev 360ms var(--ease-out);
	}

	@keyframes ruc-step-next {
		from {
			opacity: 0;
			transform: translateX(2rem);
		}
	}

	@keyframes ruc-step-prev {
		from {
			opacity: 0;
			transform: translateX(-2rem);
		}
	}

	.ruc-onb__bar span {
		transition: inline-size 420ms var(--ease-out);
	}

	.ruc-cardopt span {
		transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
	}

	.ruc-cardopt:active span {
		transform: scale(.985);
	}

	.ruc-cardopt input:checked + span {
		box-shadow: var(--ring);
	}

	/* ------------------------------------------------------------------ navegación y detalles */

	.ruc-nav__link .ruc-icon {
		transition: transform var(--dur) var(--ease-out);
	}

	.ruc-nav__link[aria-current] .ruc-icon {
		transform: scale(1.08);
	}

	.ruc-nav__link:hover .ruc-icon {
		transform: translateY(-1px);
	}

	/* Marca de la sección en curso en la barra inferior. */
	.ruc-nav__link::before {
		content: "";
		position: absolute;
		inset-block-start: 0;
		inset-inline: 30%;
		block-size: 3px;
		background: var(--accent);
		border-radius: 0 0 3px 3px;
		transform: scaleX(0);
		transition: transform var(--dur) var(--ease-out);
	}

	.ruc-nav__link[aria-current]::before {
		transform: scaleX(1);
	}

	.ruc-card {
		transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
	}

	.ruc-dialog[open] {
		animation: ruc-dialog 220ms var(--ease-out);
	}

	.ruc-dialog::backdrop {
		animation: ruc-fade 180ms linear;
	}

	@keyframes ruc-dialog {
		from {
			opacity: 0;
			transform: translateY(.75rem) scale(.98);
		}
	}

	.ruc-search__list > li {
		transition: background-color var(--dur-fast) var(--ease-out);
	}

	.ruc-row[hidden],
	.ruc-leafrow[hidden],
	.ruc-nodes > li[hidden] {
		display: none;
	}

	@media (min-width: 64rem) {
		/* En escritorio la marca va a la izquierda de la columna. */
		.ruc-nav__link::before {
			inset-block: 25%;
			inset-inline: 0 auto;
			inline-size: 3px;
			block-size: auto;
			border-radius: 0 3px 3px 0;
			transform: scaleY(0);
		}

		.ruc-nav__link[aria-current]::before {
			transform: scaleY(1);
		}
	}
}

@layer components {

	.ruc-select--mini {
		flex: none;
		max-inline-size: 11.5rem;
	}

	.ruc-select--mini select {
		min-block-size: 2.25rem;
		font-size: var(--text-label);
	}

	@media (max-width: 39.99rem) {
		.ruc-option-row .ruc-select--mini {
			margin-inline-start: calc(1.75rem + var(--space-3));
		}
	}
}

@layer components {

	/* ------------------------------------------------------------------ acceso: contraseñas y confirmaciones */

	.ruc-auth__card--wide {
		max-inline-size: 34rem;
	}

	.ruc-pass {
		position: relative;
	}

	.ruc-pass .ru-input {
		padding-inline-end: var(--control-md);
	}

	.ruc-pass__eye {
		position: absolute;
		inset-block: 0;
		inset-inline-end: 0;
		display: grid;
		place-items: center;
		inline-size: var(--control-md);
		border-radius: var(--radius-md);
		color: var(--text-muted);
		cursor: pointer;
		transition: color var(--dur-fast) var(--ease-out);
	}

	.ruc-pass__eye:hover,
	.ruc-pass__eye[aria-pressed="true"] {
		color: var(--accent);
	}

	.ruc-strength {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-1);
		margin-block-start: var(--space-2);
	}

	.ruc-strength span {
		block-size: .25rem;
		background: var(--neutral-200);
		border-radius: var(--radius-full);
		transition: background-color var(--dur) var(--ease-out);
	}

	.ruc-strength[data-level="1"] span:nth-child(-n + 1) {
		background: var(--warning-500);
	}

	.ruc-strength[data-level="2"] span:nth-child(-n + 2) {
		background: var(--primary-400);
	}

	.ruc-strength[data-level="3"] span:nth-child(-n + 3) {
		background: var(--success-500);
	}

	.ruc-strength[data-level="4"] span {
		background: var(--success-700);
	}

	.ruc-done {
		display: grid;
		justify-items: center;
		gap: var(--space-3);
		padding-block: var(--space-4);
		text-align: center;
		animation: ruc-rise 320ms var(--ease-out);
	}

	.ruc-done:focus {
		outline: 0;
	}

	.ruc-done__title {
		font-size: var(--text-h3);
		font-weight: var(--weight-semibold);
		letter-spacing: var(--tracking-snug);
	}

	.ruc-auth__card {
		animation: ruc-rise 420ms var(--ease-out);
	}

	.ruc-auth [hidden] {
		display: none;
	}
}

@layer components {

	/* ------------------------------------------------------------------ mi plan: opciones sobre una línea */

	.ruc-line {
		margin: 0 0 var(--space-4);
		padding: var(--space-4) var(--space-6) var(--space-6);
		background: var(--neutral-0);
		border: 1px solid var(--border);
		border-radius: var(--radius-xl);
	}

	.ruc-line__cap {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-1) var(--space-4);
		font-size: var(--text-body-sm);
	}

	.ruc-line__key {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		font-size: var(--text-label);
		color: var(--text-secondary);
	}

	.ruc-line__keyyou {
		inline-size: 3px;
		block-size: .875rem;
		background: var(--accent);
		border-radius: 2px;
	}

	.ruc-line__plot {
		position: relative;
		block-size: 5.5rem;
		margin-block-start: var(--space-2);
		margin-inline: .875rem;
	}

	.ruc-line__axis {
		position: absolute;
		inset-inline: -.875rem;
		inset-block-end: 1.5rem;
		block-size: 2px;
		background: var(--chart-grid);
		border-radius: 2px;
	}

	.ruc-line__tick {
		position: absolute;
		inset-block-end: 0;
		inset-inline-start: calc(var(--x) * 1%);
		display: grid;
		justify-items: center;
		inline-size: 0;
	}

	.ruc-line__tick::before {
		content: "";
		inline-size: 1px;
		block-size: .375rem;
		margin-block-end: .25rem;
		background: var(--neutral-300);
	}

	.ruc-line__tick i {
		font-size: var(--text-caption);
		font-style: normal;
		font-variant-numeric: tabular-nums;
		line-height: 1;
		color: var(--text-muted);
		white-space: nowrap;
	}

	.ruc-line__you {
		position: absolute;
		inset-block: 0 1.5rem;
		inset-inline-start: calc(var(--x) * 1%);
		inline-size: 3px;
		margin-inline-start: -1.5px;
		background: var(--accent);
		border-radius: 2px;
		transition: inset-inline-start 220ms var(--ease-out), opacity var(--dur) linear;
	}

	.ruc-line__you.is-off {
		opacity: .35;
	}

	.ruc-line__dot {
		position: absolute;
		inset-block-end: calc(1.5rem + .25rem + var(--lvl, 0) * 1.375rem);
		inset-inline-start: calc(var(--x) * 1%);
		z-index: 1;
		display: grid;
		place-items: center;
		inline-size: 1.75rem;
		block-size: 1.75rem;
		margin-inline-start: -.875rem;
		background: var(--neutral-900);
		border: 2px solid var(--neutral-0);
		border-radius: var(--radius-full);
		font-size: var(--text-caption);
		font-weight: var(--weight-semibold);
		font-variant-numeric: tabular-nums;
		color: var(--neutral-0);
		transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
	}

	.ruc-line__dot:hover,
	.ruc-line__dot:focus-visible {
		z-index: 2;
		background: var(--accent);
		transform: scale(1.15);
	}

	.ruc-line__dot[data-tip]::after {
		content: attr(data-tip);
		position: absolute;
		inset-block-end: calc(100% + .375rem);
		inset-inline-start: 50%;
		padding: .25rem var(--space-2);
		background: var(--neutral-900);
		border-radius: var(--radius-sm);
		font-size: var(--text-caption);
		font-weight: var(--weight-medium);
		color: var(--neutral-0);
		white-space: nowrap;
		opacity: 0;
		transform: translate(-50%, .25rem);
		transition: opacity var(--dur-fast) linear, transform var(--dur-fast) var(--ease-out);
		pointer-events: none;
	}

	.ruc-line__dot:hover::after,
	.ruc-line__dot:focus-visible::after {
		opacity: 1;
		transform: translate(-50%, 0);
	}

	/* La opción a la que se llega desde la línea se señala un momento. */
	.ruc-item:target {
		border-color: var(--primary-300);
		box-shadow: var(--ring);
		scroll-margin-block-start: calc(var(--header-h) + var(--space-6));
	}

	/* ------------------------------------------------------------------ portada: movimiento */

	.ruc-js [data-ruc-appear] {
		opacity: 0;
		transform: translateY(1.25rem);
		transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
	}

	.ruc-js [data-ruc-appear].is-in {
		opacity: 1;
		transform: none;
	}

	.ruc-feature {
		transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
	}

	.ruc-feature:hover {
		transform: translateY(-3px);
		border-color: var(--primary-200);
		box-shadow: var(--shadow-md);
	}

	.ruc-privacy__more a {
		color: var(--lime-300);
		font-weight: var(--weight-medium);
		text-decoration: underline;
		text-underline-offset: .2em;
	}

	/* El plan de la portada se mueve solo: las dos primeras opciones se intercambian y una tarea se marca. */
	.ruc-mock {
		animation: ruc-mock-float 7s ease-in-out infinite;
	}

	.ruc-mock > .ruc-mock__row:nth-child(2) {
		animation: ruc-mock-down 9s var(--ease-out) infinite;
	}

	.ruc-mock > .ruc-mock__row:nth-child(3) {
		animation: ruc-mock-up 9s var(--ease-out) infinite;
	}

	.ruc-mock__check--off {
		animation: ruc-mock-tick 9s linear infinite;
	}

	@keyframes ruc-mock-float {
		50% {
			translate: 0 -.5rem;
		}
	}

	@keyframes ruc-mock-down {
		0%,
		30%,
		78%,
		100% {
			transform: none;
		}

		38%,
		70% {
			transform: translateY(calc(100% + var(--space-3)));
		}
	}

	@keyframes ruc-mock-up {
		0%,
		30%,
		78%,
		100% {
			transform: none;
		}

		38%,
		70% {
			transform: translateY(calc(-100% - var(--space-3)));
		}
	}

	@keyframes ruc-mock-tick {
		0%,
		48%,
		92%,
		100% {
			background: transparent;
			border-color: var(--neutral-300);
		}

		52%,
		88% {
			background: var(--accent);
			border-color: var(--accent);
		}
	}
}