/* Sky Zone — botón compartido (Sky Hero, Sky Atracciones). Colores por variables --sz-btn-*. */
.sz-btn {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: var( --sz-btn-pv, 14px ) var( --sz-btn-ph, 24px );
	font-size: var( --sz-btn-size, 18px );
	font-weight: var( --sz-btn-weight, 400 );
	line-height: 1;
	color: var( --sz-btn-color, #000 );
	background: var( --sz-btn-bg, transparent );
	border: var( --sz-btn-border-width, 1.5px ) solid var( --sz-btn-border-color, #000 );
	border-radius: var( --sz-btn-radius, 0 );
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, border-radius 0.25s ease;
}

.sz-btn:hover,
.sz-btn:focus-visible {
	background: var( --sz-btn-hover-bg, #000 );
	color: var( --sz-btn-hover-color, #fff );
	border-color: var( --sz-btn-hover-border, var( --sz-btn-border-color, #000 ) );
	border-radius: var( --sz-btn-hover-radius, var( --sz-btn-radius, 0 ) );
}

.sz-btn:focus-visible {
	outline: 2px solid var( --sz-btn-hover-bg, #000 );
	outline-offset: 3px;
}

.sz-btn__arrow {
	flex-shrink: 0;
	font-size: 1.4em;
	line-height: 1;
}