/**
 * @layer components — encabezado de sección (eyebrow + filete horizontal,
 * título, bajada opcional, link contextual a la derecha). Da ritmo a todas
 * las secciones editoriales del sitio.
 *
 * `color`/`text-decoration` con !important: ver la nota en buttons.css.
 */

@layer components {
	.section-header {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--space-4);
		margin-bottom: var(--space-7);
	}

	.section-header__eyebrow {
		display: flex;
		align-items: center;
		gap: var(--space-4);
		margin: 0 0 var(--space-3);
		font-size: var(--eyebrow-size);
		font-weight: 600;
		letter-spacing: var(--eyebrow-tracking);
		text-transform: uppercase;
		color: var(--c-ink-500);
	}

	.section-header__filete {
		flex: 1 0 48px;
		max-width: 96px;
		height: 1px;
		background: var(--c-ink-300);
	}

	.section-header__titulo {
		margin: 0;
	}

	.section-header__bajada {
		margin: var(--space-3) 0 0;
		max-width: 56ch;
		color: var(--c-ink-500);
	}

	.section-header__enlace {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		flex-shrink: 0;
		font-size: var(--text-sm);
		font-weight: 500;
		color: var(--c-ink-900) !important;
		text-decoration: none !important;
		padding-bottom: 2px;
	}

	.section-header__enlace::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 1px;
		background: currentColor;
		transform: scaleX(1);
		transform-origin: left;
		transition: transform var(--dur-2) var(--ease-glide), background var(--dur-2) var(--ease-glide);
	}

	.section-header__enlace .icono {
		width: 16px;
		height: 16px;
	}

	.section-header__enlace:hover,
	.section-header__enlace:focus-visible {
		color: var(--c-accent-600) !important;
	}

	.section-header__enlace:hover::after,
	.section-header__enlace:focus-visible::after {
		transform: scaleX(0);
		transform-origin: right;
		transition-timing-function: var(--ease-glide);
	}
}