/*
 * /empezar — los destinos del enlace de la bio.
 *
 * Una columna estrecha en el borde del marco: casi todo el tráfico llega del navegador
 * interno de Instagram, en vertical y con una mano. Nada de rejilla.
 *
 * La nota destacada va arriba y con tratamiento propio —campo tinta— porque
 * quien viene de «enlace en la bio» la busca a ella, no al índice. Los cinco
 * destinos, debajo, son filas separadas por línea: se leen de un vistazo y el
 * área de pulsación ocupa la fila entera.
 */

.gtt-empezar {
	padding: var(--gtt-space-16) var(--gtt-marco-padding) var(--gtt-space-24);
}

/* En el marco y no centrada: centrada abría un segundo eje frente a la banda
 * de apertura, alineada a la izquierda. En móvil no cambia nada. */
.gtt-empezar__inner {
	max-width: 34rem;
}

/* ── La nota destacada ─────────────────────────────────────────────── */

.gtt-empezar__nota {
	display: block;
	padding: var(--gtt-space-8);
	margin-bottom: var(--gtt-space-12);
	background: var(--gtt-color-tinta-500);
	color: var(--gtt-color-papel-100);
	border-radius: var(--gtt-radius);
	text-decoration: none;
	transition: background 160ms ease;
}

.gtt-empezar__nota:hover,
.gtt-empezar__nota:focus-visible {
	background: var(--gtt-color-tinta-600);
}

.gtt-empezar__kicker {
	display: block;
	font-family: var(--gtt-font-mono);
	font-size: var(--gtt-text-xs);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gtt-color-tinta-100);
	margin-bottom: var(--gtt-space-4);
}

.gtt-empezar__nota-titulo {
	display: block;
	font-size: var(--gtt-text-xl);
	font-weight: 600;
	line-height: 1.24;
	text-wrap: balance;
}

.gtt-empezar__nota-entradilla {
	display: block;
	margin-top: var(--gtt-space-3);
	font-size: var(--gtt-text-base);
	line-height: 1.5;
	color: var(--gtt-color-tinta-100);
}

/* ── Los destinos ─────────────────────────────────────────────────── */

.gtt-empezar__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--gtt-color-papel-300);
}

.gtt-empezar__item {
	border-bottom: 1px solid var(--gtt-color-papel-300);
}

.gtt-empezar__enlace {
	display: block;
	padding: var(--gtt-space-6) var(--gtt-space-2);
	text-decoration: none;
	color: inherit;
}

.gtt-empezar__enlace:hover .gtt-empezar__rotulo,
.gtt-empezar__enlace:focus-visible .gtt-empezar__rotulo {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.gtt-empezar__rotulo {
	display: block;
	font-size: var(--gtt-text-lg);
	font-weight: 600;
	line-height: 1.3;
}

.gtt-empezar__apunte {
	display: block;
	margin-top: var(--gtt-space-2);
	font-size: var(--gtt-text-sm);
	line-height: 1.45;
	color: var(--gtt-color-papel-800);
}

@media (prefers-reduced-motion: reduce) {
	.gtt-empezar__nota { transition: none; }
}